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

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

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

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

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

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

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

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

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

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

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

Готово.

Посмотреть примеры с несколькими вариациями описанного способа можно здесь.

Данный способ был проверен и совместим с Internet Explorer 5.5, 6, 7, FireFox (PC и Mac), Netscape и Safari (PC и Mac).

Источник:  wpworld.ru