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

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

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

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

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

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

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

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');
	};
});

Да, мой метод требует 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');
	};
});

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

ДЕМО

Автор: David Walsh

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

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

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree