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

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

Шаг 1: Найдите анимированную иконку

Существует много сайтов, где вы можете создать свою картинку для загрузчика. Наш любимый этот ^[1]. Главное не выбирайте иконку, которая будет очень много весить. Вот такую сгенерировали мы:

Шаг 2: Добавьте CSS-правила

Тут совсем немного кода, и вы можете просто скопировать его. Только не забудьте сменить «youricon.gif» на свою картинку.

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

Шаг 3: Примените код

Тут существует несколько способов, но лучший — это обернуть больше картинки в div с классом load. Также нужно задать ему ширину и высоту картинки.

<div class="load" style="width:200px;height:200px">
<img src="large.jpg" alt="alternate text" /></div>

Посмотреть результат можно тут ^[2].

Как сообщил нам Lim Chee Aun, вы можете не оборачивать изображение в div, а сделать вот так:

<img src="large.jpg" alt="alternate text" class="load" style="width:200px;height:200px" />

Но причина, по которой мы не упомянули этот способ изначально, в том, что если картинка не была загружена, то она может испортить вам внешний вид сайта (похоже, что авторы статьи сидят под IE — прим. перев.). Если вы абсолютно уверены, что у вас не возникнет никаких проблем с загрузкой, вам по-барабану, что иконка загрузчика будет не по-центру и у вас много картинок, то вас может устроить и такое решение:

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

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

#yourcontentdiv img {
    background: url('images/youricon.gif') no-repeat center;
}

Посмотрите окончательный результат! ^[2]

Автор: kafeman

Источник ^[3]