Загрузка больших изображений на сайте

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

Эту проблему можно решить с помощью CSS и небольшого GIF-файла с анимацией загрузки (скачать  можно тут). Все, что для этого нужно – задать для больших изображений фон с GIF-файлом:

img.big {
   background: url(images/loading.gif) no-repeat center center;
}

Теперь, у всех изображений на странице, имеющих класс big (так можно обозначить большие изображения в коде), при загрузке будет видна анимация “загрузки”, что намного симпатичнее, чем пустое пятно.

826 просмотров

Комментарии