Ленивая загрузка изображений: полное руководство

1. Но ждать смены страницы не очень хорошая идея

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

Это отложенная загрузка. Чаще всего это связано с прокруткой страницы. Элемент «Lazyloaded» не будет загружен, пока пользователь не переместит страницу, чтобы увидеть элемент.

Чаще всего отложенная загрузка применяется к изображениям, но также полезно использовать ее для встроенных элементов - iframe с видео на Youtube, карты из Google или List, общий доступ к Facebook или Twitter… Но отложенная загрузка также может относиться к вашему собственному контенту.

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

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

Это полезно по двум причинам:

• Пользователь сохраняет данные и серверы разработчиков. Многие люди на вашем сайте не перемещают страницу и уходят или находят то, что им нужно, вверху страницы.
• Как разработчики, мы можем использовать отложенную загрузку, чтобы расставить приоритеты при загрузке других элементов. Например, веб-шрифты, которые связаны с файлами CSS. Это более важно для страницы, чем, например, изображения, скрытые за пределами области просмотра пользователя.

Загрузка изображений чаще всего задерживается. Чтобы вы не вставляли путь к src или параметру srcset , На самом деле, все вложенные в них файлы имеют относительно высокий приоритет в списке загрузки, и вы не мешаете браузеру загружать их.

Мы поможем вам с вашим собственным атрибутом данных:

<img alt = "…" src = "image.jpg">

Мы дали один обязательный атрибут - alt - так что все нормально для браузера. На данный момент он думает, что мы забыли указать путь к картинке и, конечно, она ничего не загружает. Нам просто нужно подумать об определении высоты изображения в HTML или CSS. Так что содержимое ниже не меняет свою позицию на отображаемой странице после загрузки и отображения изображения.

Примитивный Javascript будет делать следующее:

• Он будет ждать, пока пользователь переместит страницу.
• Затем он проверит, находится ли изображение в окне просмотра, например, используя getBoundingClientRect ().
• Если это так, он обменял бы data-src на src.

Остальным будет браузер, который будет загружать и отображать изображение по умолчанию.

Так работает большинство ленивых библиотек.

Например, вы можете попробовать это на моем примере, который использует библиотеку Unveil.js. cdpn.io/e/ILhbK

Но ждать смены страницы не очень хорошая идея

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

Этот подход (…) мучительно медленный, так как каждый вызов getBoundingClientRect ().

Таким образом, этот путь не так. Давайте попробуем это более современно.

Пересечение Наблюдатель JavaScript API, который позволяет асинхронную защиту пересечения поверхности определенного элемента с поверхностью другого элемента. Или с плоским окном просмотра.

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

Большинство браузеров изначально поддерживают это. На момент написания он работал не только во всех версиях Safari, но и в Internet Explorer. увидеть CanIUse.com , Но есть polyfill или вы можете просто выполнять обнаружение функций и ленивую загрузку только для большинства пользователей браузера, что может делать Intersection Observer.

Использование простое:

// Наблюдатель установлен var Наблюдатель = новый IntersectionObserver (обратный вызов, опции); // Мы сообщаем ему, какие элементы нужно посмотреть var contentImages = document.querySelector ('. Content img'); наблюдатель.обсервис (contentImages);

Некоторые ссылки:

Обратите внимание на примеры rootMargin Возможности Intersection Observer, позволяющие установить опцию для активации загрузки изображения. Например rootMargin: "100px 0" для отведения стопиксела. Изображение только начинает загружаться, когда оно приближается к окну просмотра. Итак, давайте возьмем на себя инициативу в случае более медленного соединения.

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

Часто бывает достаточно написать кусок кода и использовать Intersection Observer. Тем не менее, если у вас есть более конкретные требования, вот список библиотек, которые легче отложить.

Примечания к таблице:

• Я сортирую библиотеки по размеру уменьшенного дистрибутивного файла. Конечно, они имеют наименьший приоритет.
• Кроме того, важно, чтобы библиотека требовала jQuery или с чистым Javascript.
• Контент - какой тип контента можно отложить? Обычно нам нужно больше, чем просто картинки.
• Int Int. Наблюдатель говорит, что он может использовать Intersection Observer.

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

Есть два общих варианта:

1. Ждите прокрутки страницы . Просто, когда пользователь прокручивает страницу, чтобы изображение появилось в окне просмотра.
2. Дождитесь некоторого события javascript и загрузите все изображения. Например, загрузите элемент окна, когда мы узнаем, что браузер уже загрузил все остальное.

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

Но - о! - Что скажут роботы? Например, из Facebook или из Google Images. Первый вообще не может запустить Javascript, другой может это сделать, но ожидает загрузки всей страницы. Однако важно то, что ни один известный робот не сдвигает страницу. Кроме того, некоторые роботы, такие как Google, не индексируют контент <noscript>, где можно вставить замещающий тег <img> с путем к изображениям в src.

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

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

Я рекомендую разделить изображения как минимум на две категории:

• Изображения необходимы для представления контента на данной странице. Что касается деталей продукта, это будут все важные изображения продукта. Или самые важные картинки внутри статьи.
• Все остальные необходимы. Так, например, изображения рекомендуемых товаров или изображения в списке товаров в интернет-магазинах. Без них роботы (и даже пользователи) могли бы просто обойти.

Ну, мы можем просто убрать отсроченную загрузку из раскаяния.

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

<img alt = "" src = "remnant-image.jpg">

Пустой alt не является ошибкой. Это абсолютно серьезный признак представления изображения. Радек Павличек на Здрояке скажу тебе больше.

Необходимое изображение не имеет добавленной ценности к тексту. Картинки в списке товаров обычно являются хорошим примером:

<article> <img alt = "" src = "obrazek-produkt.jpg"> <h2> Название продукта </ h2> </ article>

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

Я предполагаю, что вы хотите, чтобы ваши изображения были проиндексированы поисковыми системами.

Наиболее распространенная замена, которая подтверждается как Google, так и List, с альтернативой <noscript>:

Другое возможное решение - указать запасной вариант в атрибуте src, заполнитель в srcset и фактические изображения в data-srcset. увидеть документация библиотеки Lazy Sizes , Но у меня нет ресурса, чтобы проверить, что поисковые системы обрабатывают, как ожидалось.

И последнее решение: встроить загрузку изображения в событие Scroll (не выполняется роботами поисковой системы), но некоторые другие перед Load.

Многие веб-создатели (включая автора Unveil) в демонстрационном примере ) был увлечен прелоадерами. Используя src = "" в качестве заполнителя, он дает вращающееся вращающееся колесо или другое анимированное злодеяние. Пожалуйста, не делай этого.

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

Второе: при ленивой загрузке в Upside Down я использовал заполнитель в виде прозрачного PNG вместо изображений. Но я обнаружил, что если я нахожу пользователя без изображения в качестве пользователя, похоже, что он не продолжается. Поэтому я предпочитаю полупрозрачный цветной PNG, где признается, что что-то будет когда-то.

Три разных подхода для заполнителей: анимированные на первом изображении (iRozhlas.cz), хотя и хорошо информированные о статусе страницы, но, на мой взгляд, слишком много внимания. Второе изображение получено с помощью Upside Down с использованием прозрачных заполнителей. У пользователя нет информации, что он должен чего-то ожидать здесь. Последняя версия со статическими полупрозрачными подстановочными изображениями, на мой взгляд, лучшая.

И это все.

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

• Используйте ленивую загрузку! Для сохранения данных и определения приоритетов загрузки других элементов, кроме элементов, из области просмотра.
• Попробуйте написать собственное решение с помощью Intersection Observer.
• Если вам нужна библиотека, выберите меньшие или те, которые используют Intersection Observer.
• Подумайте, какие ленивые образы развернуть, и опустите необходимые.
• Некоторые заполнители полезны, но не используют анимированные.

Похожие

Комментарии