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

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

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

UPD: Код изменен с учетом обсуждения и ценных вкладов комментаторов

HTML

<!--[if IE]><style>.loading {display: none !important;}</style><![endif]--> <!-- Отключаем в IE -- не работает или работает крайне криво. Условные комментарии не работают в IE10, IE11, для них есть конструкция в коде jQuery ниже -->

<div class="container"> <!-- контейнер для нашей картинки и индикатора -->
    <b class="loading"></b> <!-- блок индикатора c затемнением -->
    <img src="http://lh5.ggpht.com/-eglPTUEmd7I/UIePRUwEfvI/AAAAAAAAAEw/dkL3SmB7z7A/s9000/beautiful%2Bnature%2B2.jpg" class="image" /> <!-- собственно картинка -->
</div>


jQuery

$(function() {
	if(navigator.userAgent.match(/msie/i) || navigator.userAgent.match(/trident/i)) {
		$('.loading').hide();
	}
	$('.image').load(function() {
		$(this).parent().find(".loading").hide();
	});
});


CSS

body {
    background: #333;
}

.container {
    position: relative;
    margin: 20px auto;
    width: 300px;
    height: 200px;
    border: 5px solid #FFF;
}

.loading {
	position: absolute;
	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%;
}

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


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

Картинки в примере в ширину более 4000 пикселей, так что если у вас не слишком шустрый канал, полагаю, вы заметили эти красоты.

Примечания

  • В примере используется анимированный GIF в качестве индикатора загрузки. Сгенерировать подобный можно сервисом preloaders.net.
  • Может быть использован индикатор на чистом CSS: cssload.net и JS: spin.js.
  • Расширение для хрома для быстрой чистки кеша: Clear Cache.
  • Код не работает в IE7. Быть может не работает и в более поздних версиях — не было возможности проверить.
  • Некоторые рутеры ASUS (к примеру, RT-N16) со свежей родной прошивкой имеют функцию ограничения скорости, что поможет в дебаге.