Чтобы использовать данный скрипт вы можете его скачать, или установить сабмодулем в свой проект
Заключается в отложенной загрузке изображений на странице. В зависимости от события, которое вы используете для запуска скрипта, возможно начало загрузки оригинальных изображений сразу после по факту загрузки документа или полной его загрузки.
Это в свою очередь даст разный эфект с точки зрения оптимизация страницы. Например загрузка изображений по факту полной загрузки документа с большой вероятностью даст вашему сайту оценку в 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.