Skip to content
Скрипт ленивой загрузки
HTML JavaScript
Branch: master
Clone or download
Latest commit 61a68ee Apr 5, 2019

README.md

JS скрипт ленивой изображений image-lazyload

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

Принцип действия скрипта

Заключается в отложенной загрузке изображений на странице. В зависимости от события, которое вы используете для запуска скрипта, возможно начало загрузки оригинальных изображений сразу после по факту загрузки документа или полной его загрузки.

Это в свою очередь даст разный эфект с точки зрения оптимизация страницы. Например загрузка изображений по факту полной загрузки документа с большой вероятностью даст вашему сайту оценку в 90 и более баллов на мобильных устройствах по PagesSpeedInsights.

Конечно, оценка PagesSpeed ничто по сравнению с реальным удобством пользователя и его опытом, но в данном случае отложенная загрузка изображений действительно спасает в 99% случаев.

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

Вы можете использовать популярные генераторы плейсхолдеров, или сделать их самостоятельно. Мы, имея опыт в оптимизации в вебе рекомендуем делать самостоятельно. Хорошим примером будет gif формат. В отличие от других форматах он позволяет получать дейтствительно качественное изображение при макисмальном сжатии и с практически отсутствующими потерями.

Как использовать скрипт

Для его работы не требуется никаких зависимостей типа jQuery. Он полностью самобытен. Достаточно подключить скрипт:

<script src="[pathtofile]/image-lazyload.js"></script>
<img 
	srcset="[placeholder] 622w, [placeholder] 1600w" 
	data-srcset="[image] 622w, [image] 1600w" 
	src="[helper]" 
	class="g-image__lazyload">

Скрипт умеет собирать адаптивные изображения

И после инициализировать сбор изображений. Мы используем для этого класс:

<img class="g-image__lazyload" data-src="realimage.jpg" src="placeholder.jpg">

Поместив в data-src реальную ссылку на изображени, а в src, соответственно, заглушку-плейсхолдер.

Затем, в конце документа (можно и в начале, но лучше после инициализации всей DOM-модели (отличаются способы запуска), необходимомо запустить сбор данных для обработки одним из вариантов, например:

<script>
	document.addEventListener('DOMContentLoaded', function () {
		'use strict';
		var preloadImagesList = document.querySelectorAll('.g-image__preload');
		preloadImages(preloadImagesList);
	})
</script>

Или

<script>
	window.onload = function () {
		'use strict';
		var preloadImagesList = document.querySelectorAll('.g-image__preload');
		preloadImages(preloadImagesList);
	}
</script>

Поддержка

Тестировано:

  • IE11
  • EDGE
  • Chrome
  • Firefox

Для работы с IE11 необходимо использовать файл /dist/image-lazyload-babel.js или /dist/image-lazyload-babel.min.js, предварительно подключив Babel-polyfill, к примеру:

<script src="//cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.23.0/polyfill.min.js" crossorigin="anonymous"></script>
<script src="../dist/image-lazyload-babel.js"></script>

Подключать полифиллы надо до инициализации скриптов. На локальной машине такой метод не работает, только на боевом сервере.

Если не использовать полифиллы, будет ошибка Symbol is undefined in IE11. Она возникает из-за обработки babel-ом цикла for of.

Мы сознательно отказываемся от неиспользуемых браузеров, такие как IE или EDGE, но так как мы поддерживаем не только свои проекты, ввели такую приблуду для этого скрипта.

Файлы

Мы добавили 5 изображений для тестов, уже собранную заглушку test/src/image-placeholder.gif и другие. Фото взяты с сервиса pixabay.

Разворачивание проекта

В папке dist находяться скомпилированные файлы, готовые к работе. Для работы с исходниками, надо установить Gulp-CLI, NPM и запустить установку модулей из package.json.

You can’t perform that action at this time.