Иконка загрузки к большим изображениям на CSS

При работе над проектами (особенно это касается каталогов и интернет-магазинов), в которых есть большие изображения, необходимо дать пользователю знать, что картинка загружается. Для этого, с помощью 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;
}

В итоге у нас получилась вот такая страница!

Метки:
Loading Disqus Comments ...
Loading Facebook Comments ...

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *