Отложенная загрузка изображений. 5 техник ленивой загрузки

Отложенная загрузка изображений. 5 техник ленивой загрузки

От автора: изображения составляют целых 65% всего веб-контента, и время загрузки сайта легко может стать проблемой. Даже при правильной оптимизации изображения могут быть увесистыми. Это может отрицательно сказаться на времени, которое люди будут тратить на ожидание, чтобы получить доступ к чему-либо. Скорее всего, посетители не вытерпят и уйдут куда-то в другое место, если вы не придумаете решение для загрузки изображений таким образом, чтобы не мешать восприятию скорости. В этой статье вы познакомитесь с 5 техниками ленивой загрузки, которые сможете добавить в свой набор инструментов для оптимизации пользовательского опыта на сайте.

Что такое ленивая загрузка?

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

Данный подход используется на некоторых сайтах, но особенно заметен на сайтах с большим количеством изображений. Зайдите на любимую онлайн-площадку фотографий в высоком разрешении, и вы сразу же поймете, как сайт загружает ограниченное количество изображений. По мере прокрутки вниз будет видно, как плейсхолдеры быстро заменяются на реальные изображения. Например, обратите внимание на загрузчик на сайте Unsplash.com: прокрутка этой части страницы в видимую часть экрана вызывает замену плейсхолдера фотографией высокого разрешения:

Отложенная загрузка изображений. 5 техник ленивой загрузки

Зачем вообще думать о ленивой загрузке изображений?

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

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Если ваш сайт отображает контент или дает пользователям какой-либо функционал с помощью JS, то загрузка DOM имеет решающее значение. Обычно скрипты ждут полной загрузки DOM перед выполнением. На сайте с большим количеством изображений ленивая загрузка (асинхронная загрузка) может стать решающим фактором того, останется ли пользователь или покинет сайт.

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

Итак, ленивая загрузка изображений улучшает производительность сайта, но как лучше всего это сделать?

Идеального способа не существует. Если вам нравится JS, то для вас не составит труда написать свой собственный скрипт по ленивой загрузке. Или же можно найти в сети подходящие решения и поэкспериментировать с ними. Я сделал именно так и нашел эти пять интересных техник.

№1 Простая ленивая загрузка и появление от David Walsh

David Walsh предложил свой скрипт для ленивой загрузки изображений. Упрощенная версия:

Атрибут src в теге img заменяется на data-src:

<img data-src="image.jpg" alt="test image">

В CSS элементы img с атрибутом data-src скрыты. После загрузки изображения плавно появляются с помощью переходов:

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

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

Далее JS добавляет атрибут src ко всем img и дает значение соответствующего атрибута data-src. Как только все изображения загрузились, скрипт удаляет атрибут data-src из тегов img:

[].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-библиотеку перед закрывающим тегом со ссылкой на один из двух вышеупомянутых файлов. Например:

<script src="jquery.js"></script>
<script src="jquery.lazyloadxt.js"></script>

Не хотите использовать jQuery, Lazy Load XT предлагает облегченный вариант – небольшой скрипт jqlight.lazyloadxt.min.js:

<script src="jqlight.lazyloadxt.js"></script>
<script src="jquery.lazyloadxt.js"></script>

Замените в документе в изображениях атрибут src на data-src:

<img data-src="lazy.jpg" width="100" height="100" alt="test image">

Плагин может инициализироваться сам, или же можно сделать это вручную. Например, для инициализации выборки элементов напишите:

$(elements).lazyLoadXT();

Этот плагин добавляет множество аддонов. Лишь парочка:

Если добавить jquery.lazyloadxt.spinner.css, то во время загрузки изображения можно отображать анимированный спиннер.

Если подключить в проект animate.min.css и написать эту строку $.lazyLoadXT.onload.addClass = ‘animated bounceOutLeft’; в JS-файле, то можно добавить все эффекты для загрузки изображений из Animate.css. bounceOutLeft можно заменить на любой другой эффект.

Преимущества Lazy Load XT и его аддонов:

Поддерживается CDN, т.е. не нужно загружать скрипты Lazy Load XT на свой сервер.

Широкая поддержка в браузерах, в том числе в IE6-11 и Opera Mini.

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Ленивую загрузку изображений можно использовать на странице, в прокручиваемом контейнере, в макетах с вертикальной и горизонтальной прокруткой. Сценариев нескончаемо много.

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

Можно лениво загружать разные типы медиа.

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

Не нужно подключать полную jQuery-библиотеку, чтобы использовать этот плагин.

Полный список вариантов и аддонов можно найти в репозитории azy Load XT на GitHub.

№4 bLazy.js –плагин на чистом JavaScript

Отложенная загрузка изображений. 5 техник ленивой загрузки

bLazy – умный JS-плагин ленивой загрузки. Более конкретно: «bLazy – легковесный скрипт ленивой загрузки (менее 1.2Кб минифицированная и сжатая версия). Он позволяет лениво загружать и обслуживать несколько изображений для экономии трафика и запросов на сервер. Если пользователи не будут прокручивать всю страницу, то сайт будет загружаться быстрее» — Сайт bLazy

Этот небольшой независимый плагин позволяет:

Лениво загружать вставляемые и фоновые изображения.

Загружать разные изображения в зависимости от размера экрана и его разрешения.

Лениво загружать все с атрибутом src, например, iframe, HTML5-видео, скрипты, игры на unity и т.д.

Лениво загружать изображения в прокручиваемом контейнере.

Поддерживать старые браузеры вплоть до IE7-8.

Использовать CDN, чтобы не размещать плагин на своем сервере.

Базовая реализация. Разметка:

<img class="b-lazy" src="placeholder.gif" data-src="image.jpg" alt="test image">

Обычный тег img нужно изменить следующим образом:

Добавить класс .b-lazy.

Использовать плейсхолдер в качестве значения src. Для экономии HTTP-запросов также можно использовать инлайновые прозрачные gif с кодировкой base64. Но будьте осторожны, так у вас не будет кэширования на последующих страницах, где используется одно и то же изображения.

Атрибут data-src указывает на изображение, которое необходимо лениво загрузить.

JS: введите простой вызов bLazy и настройте объект по карте опций:

var bLazy = new Blazy({
  //опции
});

№5 Ленивая загрузка с эффектом размытого изображения

Если вы читаете Medium, то должны были заметить, как сайт загружает главное изображение поста. Сперва вы видите размытое изображение низкого качества, пока загружается версия с высоким разрешением:

Отложенная загрузка изображений. 5 техник ленивой загрузки

Размытый плейсхолдер на сайте Medium

Отложенная загрузка изображений. 5 техник ленивой загрузки

Лениво загруженное изображение высокого качества на сайте Medium

Можно несколькими способами лениво загружать изображения с таким интересным размытым эффектом. Мой любимый – техника от Craig Buckler. Плюсы его решения:

Производительность: всего 463 байта CSS и 1.007 байт минифицированного JS-кода.

Поддержка ретина экранов.

Нет зависимостей: нет jQuery и других библиотек и фреймворков.

Используется техника прогрессивного улучшения для старых браузеров и поломанного JS.

Более подробно с методом можно ознакомиться в статье «как создать свой собственный загрузчик прогрессивных изображений», а также скачать код с репозитория проекта на GitHub.

Заключение

Вот и все, 5 способов ленивой загрузки изображений, с которыми можно экспериментировать в своих проектах.

Какой метод ваш любимый? Как вы думаете, ленивая загрузка изображений улучшает пользовательский опыт и производительность на сайте? Пишите об этом в комментариях.

Автор: Maria Antonietta Perna

Источник: https://www.sitepoint.com/

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

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее
Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Практика оптимизации сайта: ускорение загрузки Вашего сайта в разы

Узнайте как ускорить загрузку сайта .

Научиться

Метки:

Похожие статьи:

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

Комментарии 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