Lazy Load – отложенная загрузка изображений

Одной из самых быстрой и простой оптимизации производительности сайта является уменьшение времени загрузки изображений. Минимизацию изображений можно сделать с помощью таких инструментов, как ImageOptim и TinyPNG, использование URI и спрайтов данных, а также использование отложенной загрузки изображений (lazyload).

Lazy-load или «ленивая» загрузка — это способ отображения контента на сайте, когда элементы загружаются по мере необходимости (асинхронно), а не сразу вместе с запрашиваемой страницей.

Когда браузер «видит» у элемента атрибут src, то делает запрос по указанному в нём адресу, что увеличивает время полной загрузки документа. Соответственно, чем больше внешних ресурсов синхронно подключается к странице, тем медленнее она загружается. Чтобы избежать множества одновременных запросов и оптимизировать скорость загрузки, используется техника lazy-load.

HTML код

Подключим тег img. Атрибут src используется со временным значением (использовать пустое значение или вообще не использовать src не правильно с точки зрения W3C валидации), которое затем с помощью javascript будет заменено на значение из data-src.

Таким образом, при использовании lazy-load при первой загрузке страницы производится не одновременно несколько запросов к разным внешним ресурсам, а всего один — к временному изображению, указанному в атрибуте src, который кешируется браузером, и только затем при необходимых условиях (наступление заданных событий – загрузке, клике или при прокрутке страницы) для выбранных элементов устанавливается их оригинальный src.

<img alt="" data-src="/path/to/image.jpg" src="https://dummyimage.com/600x400/000/fff" />

CSS код

img {
	opacity: 1;
	transition: opacity 0.3s;
}

img[data-src] {
	opacity: 0;
}

С атрибутом data-src мы и будем дальше работать.

Javascript

Код будет удалять data-src из кода при загрузке изображения. При этом за счет свойства transition в CSS изображение будет появляться плавно на странице.

[].forEach.call(document.querySelectorAll('img[data-src]'), function(img) {
	img.setAttribute('src', img.getAttribute('data-src'));
	img.onload = function() {
		img.removeAttribute('data-src');
	};
});

Этот код не учитывает ленивую подгрузку изображений при прокрутке страницы, но это, обычно, делается с помощью какого-нибудь плагина JavaScript. Способ подходит для использования на небольших сайтах или ознакомления с возможным способом реализации отложенной загрузки элементов.