После довольно продолжительных поисков был найден очень лаконичный jquery скрипт, который реализует данный функционал, однако оформление оставляло желать лучшего, посему было решено данный кусок кода доработать. И вот что из этого вышло.
Для реализации задачи нам нужен контейнер картинки, сама картинка, и блок-индикатор. Во время загрузки блок лоадера затемняет картинку и показывает в центре индикатор загрузки. После загрузки картинки блок исчезает. Скрипт прекрасно работает в применении к множеству картинок на одной странице.
HTML
<div class="images"><!-- контейнер для нашей картинки и индикатора --> <b class="loading" style="display:none"></b><!-- индикатор + затемнение --> <img src="http://stylonica.com/wp-content/uploads/2014/02/nature.jpg" class="img" /><!-- собственно картинка --> </div>
jQuery
$(function() { var images = $('.img'), total = images.length, count = 0; $('.loading').show(); images.load(function() { count = count + 1; if (count >= total) { $('.loading').hide(); } }); });
CSS
body { background: #333; } .images { position: relative; margin: 20% auto; width: 300px; height: 200px; border: 5px solid #FFF; } .loading { position: absolute; z-index: 10; display: block; background: #555 url('http://katushka.in.ua/templates/katushka2/images/ajax-loader.gif') center center no-repeat; opacity: 0.7; width: 100%; height: 100%; } .img { width: 300px; height: 200px; }
Смотреть пример на jsFiddle
Картинка в примере в ширину более 2000 пикселей так что если у вас не слишком шустрый канал, полагаю, вы заметили эти красоты.
Примечания
- В примере используется анимированный GIF в качестве индикатора загрузки. Сгенерировать подобный можно сервисом ajaxload.info.
- Может быть использован индикатор на чистом CSS, сгенерировать код можно здесь: cssload.net
- Код не работает в IE7. Быть может не работает и в более поздних версиях — не было возможности проверить. Если у вас есть — будьте добры, отпишитесь о результатах.
- Рутеры ASUS (в моем случае это RT-N16) со свежей родной прошивкой имеют функцию ограничения скорости, что поможет в дебаге.
ссылка на оригинал статьи http://habrahabr.ru/post/218265/
Добавить комментарий