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

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

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

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

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

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

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

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

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

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

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

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

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

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

READ
Новая функция CSS image

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

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

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

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

12<img src=»myimage.jpg» loading=»lazy» alt=»…» /><iframe src=»content.html» loading=»lazy»></iframe>

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

lazy: отлично подходит для отложенной загрузки

eager: указывает браузеру загрузить заданный контент сразу

auto: оставляет решение на усмотрение браузера.

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

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

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

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

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

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

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

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

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

CSS

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

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

READ
В чем разница между узлом и элементом в DOM?

JavaScript

1234567891011121314151617181920212223// create config object: rootMargin and threshold// are two properties exposed by the interfaceconst config = {  rootMargin: ‘0px 0px 50px 0px’,  threshold: 0}; // register the config object with an instance// of intersectionObserverlet 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:

JavaScript

1234const 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 и импортировать его, используя выбранный вами пакет модулей:

JavaScript

12npm install —save lozadyarn add lozad

JavaScript

1import lozad from ‘lozad’;

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

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

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

READ
Блогеры YouTube получили в свое распоряжение новый аналитический инструмент

1<img class=»lozad» data-src=»img.jpg»>

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

JavaScript

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

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

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

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

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

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

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

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

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

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

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

Производительность: всего 463 байта CSS и 1 007 байтов минимизированного кода JavaScript

Поддержка экранов высокого разрешения

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

Прогрессивное улучшение, чтобы охватить старые браузеры и пользователей, отключивших JavaScript

#5 Yall.js

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

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

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

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

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

вы добавляете класс lazy к элементу

значение src является заполнителем изображения

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

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

отличная производительность с помощью Intersection Observer API

фантастическая поддержка браузерами (вплоть до IE11)

нет необходимости в других зависимостях

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

Заключение

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

Автор: Maria Antonietta Perna

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

Источник

Оценить статью
Блог о самом интересном.