Добавляем анигиф предзагрузки больших изображений через CSS

Загрузка больших изображений может занимать некоторое время. Полезно давать пользователю знать, что этот процесс происходит. Обычно это достигается с помощью Java - скрипта, который выводит на месте будущей картинки маленький анигиф предзагрузки.

Однако, существует существенно более простой способ достичь того же самого, особенно, если на странице выводится множество больших изображений.

1. Находим иконку предварительной загрузки

Существует много сайтов, позволяющих выбрать и настроить изображения предзагрузки. Например, вот этот. Изображение (размер файла) не должно быть слишком большим. Например, возьмем такое:

2. Пишем CSS-код

Код минимален, создается всего одно просто правило следующего содержания:

.load { background: url(i/load.gif) center no-repeat; }

Вместо load.gif, естественно, должно быть название вашей иконки предзагрузки.

3. Пишем HTML-код

Чтобы иконку предзагрузки можно было центрировать относительно размеров изображения, поместим изображение в div-контейнер, которому зададим размеры изображения:

<div class="load" style="width:200px;height:200px"> <img src="large.jpg" alt="Альтернативный текст" /></div>

Готово.




Page: [1] [2] [3] [4] [5]
промышленный фен, строительный фен | Катание на вейкборде - спортивный вейкборд, интернет-магазин вейкбордов. | Вентилируемые фасады. Москва - фасадные панели nailite facad-doma.ru.
 
 

статистика сайта
Page created in 0,01913 seconds Powered by LastoBlog