При работе над проектами (особенно это касается каталогов и интернет-магазинов), в которых есть большие изображения, необходимо дать пользователю знать, что картинка загружается. Для этого, с помощью javascript, можно для всех картинок, которые не загрузились, применить анимированную иконку, а можно сделать все тоже самое, но с помощью css.
Для этого необходимо:
1. Найти подходящую иконку в сети, или воспользоваться генератором иконок на сайте ajaxload.info или loadinfo.net.
Например можно взять, такую иконку загрузчика
2. В css добавить правила:
.load {
background: url("images/youricon.gif") no-repeat center;
}
youricon.gif – заменить на ваше название иконки
3. В html добавить код:
<div class="load" style="width:200px;height:200px">
<img alt="alternate text" src="large.jpg" />
</div>
large.jpg – основная картинка, которая будет показана. Название заменить на нужное вам.
Посмотреть результат можно тут.
Для картинки в css прописать следующие свойства:
img {
background: url('images/youricon.gif') no-repeat center;
}
В итоге у нас получилась вот такая страница!