Блог веб разработчика Wincert

Представим ситуацию, когда у нас на сайте присутствуют изображения большого размера и их загрузка занимает немало времени. В таких ситуациях лучше всего поставить иконку ожидания загрузки. Вы наверняка видели такие иконки на Java Script, но это надо знать этот язык и писать немаленькие коды. Такую иконку ожидания загрузки можно сделать на CSS и в этом случае все до безобразия легко и просто для тех кто хоть немного знаком с CSS, а кто незнаком думаю не составит большого труда понять как это делается.

В первую очередь надо надыбать саму иконку ожидания загрузки. Можно конечно попытаться нарисовать самому, но я предлагаю не тратить на это время и воспользоваться сервисом www.ajaxload.info. Выбираем там иконку и цвет, я выбрал вот такую:

Теперь пишем HTML код. Здесь как я уже и сказал выше все безобразно и просто :), вставляем изображение обычным способом и помещаем его в DIV:

<div id="img">
<img src="cat.jpg">
</div>

Где cat.jpg наше изображение большого размера.

Теперь пишем CSS код. Здесь все еще безобразнее и проще чем HTML коде :), вставляем нашу иконку ожидания загрузки как фон к нашему большому изображению:

#img {
    background: url(load.gif) center no-repeat;
}

где load.gif наша иконка ожидания загрузки.

Вот например можете посмотреть это в действии здесь.

Вот собственно и все. Конечно не совсем идеально получается, но все же вариант для тех кто не знает Java Script или просто не хочет писать на нем такое.