Пять способов отложенной загрузки изображений

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

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

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

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

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

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

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

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

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

Кроме того, вы можете поискать подходящие подходы и начать экспериментировать с ними. Я так и сделал и наткнулся на эти пять интересных техник.

#1 Нативная отложенная загрузка

Нативная ленивая загрузка изображений и фреймов очень крута. Ничто не может быть более простым, чем эта разметка:

<img src="myimage.jpg" loading="lazy" alt="..." />
<iframe src="content.html" loading="lazy"></iframe>

Как видите, здесь нет ни JavaScript, ни динамической замены значения атрибута src, просто старый добрый HTML. Атрибут Loading дает нам возможность откладывать изображения и плавающие фреймы вне экрана, пока пользователи не прокручивают страницу вниз до места их расположения на странице. Loading может принимать любое из этих трех значений:

У этого метода нет конкурентов: он не связан с дополнительными затратами, он чистый и простой. Однако, хотя на момент написания статьи большинство основных браузеров хорошо поддерживали атрибут loading, тем не менее поддержка пока не охватывает все браузеры.

#2 Отложенная загрузка с использованием API Intersection Observer

Intersection Observer API — это современный интерфейс, который можно использовать для отложенной загрузки изображений и другого контента.

Вот как MDN представляет этот API: API Intersection Observer предоставляет способ асинхронно наблюдать изменения в пересечении целевого элемента с элементом-предком или с областью просмотра документа верхнего уровня.

Другими словами, асинхронно отслеживается пересечение одного элемента с другим. У Дениса Мишунова есть отличное руководство как по Intersection Observer, так и по отложенной загрузке изображений с его помощью. Вот как выглядит его решение.

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

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

Обратите внимание, что путь к изображению содержится внутри атрибута data-src, а не атрибута src. Причина в том, что использование src означает, что изображение будет загружаться сразу, а это не то, что нам нужно.

В CSS вы задаете каждому изображению значение min-height, скажем, 100px. Это задает каждому заполнителю изображения (элемент img без атрибута src) вертикальное измерение:

img { min-height: 100px; /* more styles here */
}

В документе JavaScript вы затем создаете объект config и регистрируете его экземпляром с intersectionObserver:

// create config object: rootMargin and threshold
// are two properties exposed by the interface
const config = { rootMargin: '0px 0px 50px 0px', threshold: 0
}; // register the config object with an instance
// of intersectionObserver
let observer = new intersectionObserver(function(entries, self) { // iterate over each entry entries.forEach(entry => { // process just the images that are intersecting. // isIntersecting is a property exposed by the interface if(entry.isIntersecting) { // custom function that copies the path to the img // from data-src to src preloadImage(entry.target); // the image is now in place, stop watching self.unobserve(entry.target); } });
}, config);

Наконец, мы перебираете все изображения и добавляете их в экземпляр iterationObserver:

const imgs = document.querySelectorAll('[data-src]');
imgs.forEach(img => { observer.observe(img);
});

Преимущества этого решения: его легко реализовать, оно эффективно — intersectionObserver требует значительных затрат с точки зрения расчетов.

С другой стороны, хотя Intersection Observer API поддерживается большинством браузеров в их последних версиях, не все реализовали его последовательно. К счастью, доступен полифилл.

#3 Lozad.js

Быстрая и простая альтернатива реализации отложенной загрузки изображений — позволить библиотеке JS выполнить большую часть работы.

Lozad — это высокопроизводительный, легкий и настраиваемый отложенный загрузчик на чистом JavaScript без каких-либо зависимостей. Вы можете использовать его для отложенной загрузки изображений, видео, фреймов и т. д. И он использует Intersection Observer API.

Вы можете включить Lozad в npm / Yarn и импортировать его, используя выбранный вами пакет модулей:

npm install --save lozad
yarn add lozad

import lozad from 'lozad';

Кроме того, вы можете просто загрузить библиотеку, используя CDN, и добавить ее в конец HTML-страницы в теге script:

<script src="https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js"></script>

Далее, для базовой реализации, добавьте класс lozad для ресурсов разметки:

<img class="lozad" data-src="img.jpg">

Наконец, создайте экземпляр Lozad в документе JS:

const observer = lozad();
observer.observe();

Все подробности о том, как вы можете использовать библиотеку, вы найдете в репозитории Lozad на GitHub.

Если вы не хотите углубляться в изучение Intersection Observer API или просто ищете быструю реализацию, применимую к различным типам контента, Lozad — отличный выбор.

Только помните о поддержке браузерами и интегрируйте эту библиотеку с полифиллом для API Intersection Observer.

#4 Отложенная загрузка с эффектом размытого изображения

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

Размытое изображение заполнителя на сайте Medium

Изображение в высоком разрешении, отложено загруженное на сайте Medium

Вы можете отложено загружать изображения с этим интересным эффектом размытия несколькими способами. Моя любимая техника Крейга Баклера. Вот все преимущества этого решения:

#5 Yall.js

Yall — это многофункциональный, скрипт для отложенной загрузки изображений, видео и фреймов. В частности, он использует Intersection Observer API и, при необходимости, интеллектуальные методы обработки событий. При включении Yall в документ вам нужно инициализировать его следующим образом:

<script src="yall.min.js"></script>
<script> document.addEventListener("DOMContentLoaded", yall);
</script>

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

<img class="lazy" src="placeholder.jpg" data-src="image-to-lazy-load.jpg" alt="Alternative text to describe image.">

Обратите внимание:

Среди преимуществ Yall:

Чтобы узнать больше о том, что может предложить Yall, и о более сложных реализациях, вы можете обратиться к странице проекта на GitHub.

Заключение

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

Автор: Maria Antonietta Perna

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

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