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

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

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

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

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

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

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

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

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

#3 Lozad.js

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

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

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

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

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

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

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

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

Все подробности о том, как вы можете использовать библиотеку, вы найдете в репозитории 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 в документ вам нужно инициализировать его следующим образом:

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

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

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

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

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

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

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

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

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

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

Заключение

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

Автор: Maria Antonietta Perna

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

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

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

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

Фриланс-Мастер

Как продавать свои услуги онлайн

Подробнее

Метки:

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

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

Комментарии Facebook: