- PVSM.RU - https://www.pvsm.ru -
Коль скоро быстрый интернет пока еще не везде, не на всех устройствах, пришла мысль что неплохо бы облагородить процесс загрузки картинок. Задача эта не слишком функциональна, однако дизайн-фрики, полагаю, не раз задавали себе вопрос, как просто реализовать индикацию подгрузки картинки.
После довольно продолжительных поисков был найден очень лаконичный jquery скрипт, который реализует данный функционал, однако оформление оставляло желать лучшего, посему было решено данный кусок кода доработать. И вот что из этого вышло.
Для реализации задачи нам нужен контейнер картинки, сама картинка, и блок-индикатор. Во время загрузки блок лоадера затемняет картинку и показывает в центре индикатор загрузки. После загрузки картинки блок исчезает. Скрипт прекрасно работает в применении к множеству картинок на одной странице.
<div class="images"><!-- контейнер для нашей картинки и индикатора -->
<b class="loading" style="display:none"></b><!-- индикатор + затемнение -->
<img src="http://ru.forwallpaper.com/download/files/mountains-trees-mountain-river-water-nature-279124" class="img" /><!-- собственно картинка -->
</div>
$(function() {
var images = $('.img'),
total = images.length,
count = 0;
$('.loading').show();
images.load(function() {
count = count + 1;
if (count >= total) {
$('.loading').hide();
}
});
});
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. [1]
Картинка в примере в ширину более 2000 пикселей, так что если у вас не слишком шустрый канал, полагаю, вы заметили эти красоты. Если же поглядеть на процесс загрузки не удалось и нет возможности ограничить скорость — мобильный интернет 2G вам в помощь.
Автор: noys
Источник [5]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/jquery/58428
Ссылки в тексте:
[1] Смотреть пример на jsFiddle.: http://jsfiddle.net/noys/Sxjmk/
[2] ajaxload.info: http://www.ajaxload.info/
[3] cssload.net: http://cssload.net/
[4] Clear Cache: https://chrome.google.com/webstore/detail/clear-cache/cppjkneekbjaeellbfkmgnhonkkjfpdn
[5] Источник: http://habrahabr.ru/post/218265/
Нажмите здесь для печати.