От автора: изображения составляют целых 65% всего веб-контента, и время загрузки сайта легко может стать проблемой. Даже при правильной оптимизации изображения могут быть увесистыми. Это может отрицательно сказаться на времени, которое люди будут тратить на ожидание, чтобы получить доступ к чему-либо. Скорее всего, посетители не вытерпят и уйдут куда-то в другое место, если вы не придумаете решение для загрузки изображений таким образом, чтобы не мешать восприятию скорости. В этой статье вы познакомитесь с 5 техниками ленивой загрузки, которые сможете добавить в свой набор инструментов для оптимизации пользовательского опыта на сайте.
Что такое ленивая загрузка?
При ленивой загрузке изображения на сайте загружаются асинхронно, т.е. после полной загрузки видимой части страницы или вообще по условию только при появлении во вьюпорте. Это значит, что если пользователь не долистает страницу до конца, изображения в нижней части вообще не загрузятся.
Данный подход используется на некоторых сайтах, но особенно заметен на сайтах с большим количеством изображений. Зайдите на любимую онлайн-площадку фотографий в высоком разрешении, и вы сразу же поймете, как сайт загружает ограниченное количество изображений. По мере прокрутки вниз будет видно, как плейсхолдеры быстро заменяются на реальные изображения. Например, обратите внимание на загрузчик на сайте Unsplash.com: прокрутка этой части страницы в видимую часть экрана вызывает замену плейсхолдера фотографией высокого разрешения:
Зачем вообще думать о ленивой загрузке изображений?
Есть, как минимум, две замечательные причины, почему стоит подумать об использовании ленивой загрузки изображений на вашем сайте:
Если ваш сайт отображает контент или дает пользователям какой-либо функционал с помощью JS, то загрузка DOM имеет решающее значение. Обычно скрипты ждут полной загрузки DOM перед выполнением. На сайте с большим количеством изображений ленивая загрузка (асинхронная загрузка) может стать решающим фактором того, останется ли пользователь или покинет сайт.
Большинство решений по ленивой загрузке загружают изображения только, если пользователь прокрутил страницу до того места, где оно попадает во вьюпорт. Если пользователь никогда не докрутит страницу до этой точки, изображения не будут загружены. Это значительно экономит трафик, за что большинство пользователей, особенно пользователи мобильных устройств и пользователи на слабых соединениях, скажут вам спасибо.
Итак, ленивая загрузка изображений улучшает производительность сайта, но как лучше всего это сделать?
Идеального способа не существует. Если вам нравится JS, то для вас не составит труда написать свой собственный скрипт по ленивой загрузке. Или же можно найти в сети подходящие решения и поэкспериментировать с ними. Я сделал именно так и нашел эти пять интересных техник.
№1 Простая ленивая загрузка и появление от David Walsh
David Walsh предложил свой скрипт для ленивой загрузки изображений. Упрощенная версия:
Атрибут src в теге img заменяется на data-src:
|
1 |
<img data-src="image.jpg" alt="test image"> |
В CSS элементы img с атрибутом data-src скрыты. После загрузки изображения плавно появляются с помощью переходов:
|
1 2 3 4 5 6 7 8 |
img { opacity: 1; transition: opacity 0.3s; } img[data-src] { opacity: 0; } |
Далее JS добавляет атрибут src ко всем img и дает значение соответствующего атрибута data-src. Как только все изображения загрузились, скрипт удаляет атрибут data-src из тегов img:
|
1 2 3 4 5 6 |
[].forEach.call(document.querySelectorAll('img[data-src]'), function(img) { img.setAttribute('src', img.getAttribute('data-src')); img.onload = function() { img.removeAttribute('data-src'); }; }); |
David Walsh также предлагает фолбек на случай, когда JS не сработал. Фолбек можно посмотреть в его блоге. Плюс этого решения: легко реализовывается и эффективное.
С другой стороны, этот метод не включает в себя функционал загрузки по прокрутке страницы. Другими словами, браузер загружает все изображения, независимо от того, прокрутил пользователь страницу или нет. Страница загружается быстрее, так как изображения загружаются после HTML. Тем не менее, вы не экономите трафик.
№2 Ленивая загрузка с прогрессивным улучшением от Robin Osborne
Robin Osborne предлагает супер гениальное решение на основе прогрессивного улучшения. В его методе ленивая загрузка на JS считается улучшением для обычного HTML и CSS.
Почему именно прогрессивное улучшение? Если вы будете показывать изображения с помощью JS, что будет, если JS отключить, или если возникнет ошибка, которая заблокирует выполнение скрипта? В таком случае без прогрессивного улучшения пользователи вообще не увидят изображений. Не очень хорошо.
Более подробно с решением Osborne можно ознакомиться в Pen. Есть еще один расширенный Pen, где учтен случай поломки JS.
У этой техники ряд преимуществ:
Техника прогрессивного улучшения гарантирует пользователям доступ к контенту.
Метод подходит не только под ситуации с недоступным JS, но и под ситуации, когда JS сломан: все мы знаем, как могут быть подвержены ошибкам скрипты, особенно в среде с большим количеством запущенных скриптов.
Работает ленивая загрузка изображений по прокрутке. Если пользователь не прокрутит страницу до нужного места, изображения не загрузятся.
Метод не опирается на внешние зависимости, т.е. не нужны фреймворки и плагины.
Более подробно с подходом Robin Osborne можно ознакомиться в его блоге.
№3 Lazy Load XT jQuery плагин
Быстрая и простая альтернатива написанию собственной ленивой загрузки — JavaScript/jQuery плагин, который сделает всю самую сложную работу за вас.
Lazy Load XT – многофункциональный jQuery плагин. Можно скачать упрощенную версию jquery.lazyloadxt.js, в которой доступна только ленивая загрузка. Или же можно использовать расширенную версию плагина jquery.lazyloadxt.extra.js. В расширенной версии с помощью ленивой загрузки можно загружать iframe, видео и все теги с атрибутом src.
Чтобы подключить Lazy Load XT в проект, добавьте jQuery-библиотеку перед закрывающим тегом
