[Из песочницы] Простой индикатор загрузки картинки на Jquery

Коль скоро быстрый интернет пока еще не везде, не на всех устройствах, пришла мысль что неплохо бы облагородить процесс загрузки картинок. Задача эта не слишком функциональна, однако дизайн-фрики, полагаю, не раз задавали себе вопрос, как просто реализовать индикацию подгрузки картинки.

После довольно продолжительных поисков был найден очень лаконичный jquery скрипт, который реализует данный функционал, однако оформление оставляло желать лучшего, посему было решено данный кусок кода доработать. И вот что из этого вышло.

Для реализации задачи нам нужен контейнер картинки, сама картинка, и блок-индикатор. Во время загрузки блок лоадера затемняет картинку и показывает в центре индикатор загрузки. После загрузки картинки блок исчезает. Скрипт прекрасно работает в применении к множеству картинок на одной странице.

HTML

<div class="images"><!-- контейнер для нашей картинки и индикатора -->
    <b class="loading" style="display:none"></b><!-- индикатор + затемнение -->
    <img src="http://ift.tt/QKOyrY" 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://ift.tt/1q4HFhe') center center no-repeat;
        opacity: 0.7;
        width: 100%;
        height: 100%;
}

.img {
    width: 300px;
    height: 200px;
}

Смотреть пример на jsFiddle.

Картинка в примере в ширину более 2000 пикселей, так что если у вас не слишком шустрый канал, полагаю, вы заметили эти красоты. Если же поглядеть на процесс загрузки не удалось и нет возможности ограничить скорость — мобильный интернет 2G вам в помощь.

Примечания

• В примере используется анимированный GIF в качестве индикатора загрузки. Сгенерировать подобный можно сервисом ajaxload.info.


• Может быть использован индикатор на чистом CSS, сгенерировать код можно здесь: cssload.net.


• Расширение для хрома для быстрой чистки кеша: Clear Cache.


• Код не работает в IE7. Быть может не работает и в более поздних версиях — не было возможности проверить. Если у вас есть — будьте добры, отпишитесь о результатах.


• Рутеры ASUS (в моем случае это RT-N16) со свежей родной прошивкой имеют функцию ограничения скорости, что поможет в дебаге.

This entry passed through the Full-Text RSS service — if this is your content and you're reading it on someone else's site, please read the FAQ at http://ift.tt/jcXqJW.