Давайте представим, что у вас на странице имеются большие картинки, и вы хотите, чтобы пользователь знал, что они загружаются. С помощью JavaScript'а можно внедрить анимированную иконку ко всем изображениям, которые еще не загружены, но мы можем предложить вам более простой и чистый способ.
Шаг 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>
Посмотреть результат можно тут.
Как сообщил нам 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;
}
Посмотрите окончательный результат!
Автор: kafeman
