Как я могу улучшить время загрузки и компоновку моих изображений значков?

Question

Мой веб-сайт имеет такой код:

<ul>
<li><a class='disabled' ><img src='../../Content/Icons/home.png' />Home</a></li>
<li><a href='xx'  title='xx'><img src='../../Content/Icons/xx.png' />xx</a></li>
<li><a href='yy'  title='yy'><img src='../../Content/Icons/yy.png' />yy</a></li>
</ul>

Есть две проблемы.

1) Я хотел бы объединить мои изображения в один большой файл изображения, содержащий несколько изображений.Я думал об использовании фона, НО мои сидения на DIV с градиентным фоном, поэтому я не думаю, что я не уверен, если это возможно.Обратите внимание, что мои иконки имеют прозрачный фон.2) Когда отображается страница, происходит задержка при загрузке изображений.После того, как они загрузили их, мои DIVs немного сместились в положение.

У кого-нибудь есть идеи относительно того, что я мог бы сделать здесь.Что мне нужно, так это чтобы правильное расположение иконки.Прямо сейчас это выглядит так:

xxxxxxxxxxxxxxxxx
x               x
x Icon     Home x
x               x
xxxxxxxxxxxxxxxxx

Надеюсь, что кто-то может помочь с предложениями / подсказками.

Answer 1

Для первой проблемы, я не уверен, что вы имеете в виду, объединяя их в файл с несколькими изображениями. Вы можете объединить их в один файл изображения, или они могут быть отдельными изображениями, как сейчас. Я не уверен, какую выгоду вы хотите получить от них в одном файле. Современные браузеры довольно умны, и вы не будете экономить больше, чем несколько миллисекунд, делая это таким образом.

Вторая проблема заключается в том, что браузер неправильно угадывает размер изображения при первом рендере. Проверьте документацию W3C для тега img. Скажем, ваше изображение размером 25 на 25 пикселей. Вы можете сделать что-то вроде:

<img src='../../Content/Icons/xx.png' width="25" height="25" />

Таким образом, браузер заранее знает, сколько места займет изображение, когда оно станет доступным.