Ленивая загрузка и появление изображений

Дата публикации: 2015-09-30

От автора: Уменьшение времени загрузки изображений на данный момент один из самых быстрых и легких способов повышения производительности сайта. Время загрузки включает в себя много понятий: минификация изображений с помощью инструментов типа ImageOptim и TinyPNG, data URI, спрайты, а также ленивая загрузка изображений.

Такой тип загрузки слегка сбивает с толку, изображения появляются прямо из ниоткуда, и чтобы изображение не появлялось слишком резко, можно применить плавное появление. Я просто обожаю этот эффект. Если не установить разрешение изображения, то во время загрузки страница будет прыгать, и только потом плавно появится изображение. Я видел различные решения этой проблемы (некоторые не самые удачные, как мой прошлый способ), и я решил поделиться с вами моим новым методом.

<img data-src="/path/to/image.jpg" alt="">

1	<img data-src="/path/to/image.jpg" alt="">

Ссылку укажите через data-src.

Изображения с атрибутом data-src должны быть невидимыми, плавно уменьшая прозрачность:

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

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

img {

opacity: 1;

transition: opacity 0.3s;

}

img[data-src] {

opacity: 0;

}

Вы уже можете догадаться, что мы будем делать с этим атрибутом во время загрузки изображения атрибут будет удаляться после загрузки изображения

function(img) {
	img.setAttribute('src', img.getAttribute('data-src'));
	img.onload = function() {
		img.removeAttribute('data-src');
	};
});

function(img) {

img.setAttribute('src', img.getAttribute('data-src'));

img.onload = function() {

img.removeAttribute('data-src');

};

});

Да, мой метод требует JavaScript, как вы могли заметить. Для старых браузеров добавьте.

<noscript>
<img src="/path/to/image.jpg" data-src="" alt="">
</noscript>

Array.prototype.forEach.call(document.querySelectorAll('noscript img'), function(img) {
	img.insertBefore(img.parentNode);
	img.onload = function() {
		img.removeAttribute('data-src');
	};
});

</noscript>

Array.prototype.forEach.call(document.querySelectorAll('noscript img'), function(img) {

img.insertBefore(img.parentNode);

img.onload = function() {

img.removeAttribute('data-src');

};

});

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

ДЕМО

Автор: David Walsh

Источник: //davidwalsh.name/

Редакция: Команда webformyself.

Метки: сайтостроение