Гибридная ленивая загрузка: прогрессивная миграция к родной ленивой загрузке

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

JavaScript-Driven Ленивый загрузки

Для того, чтобы ленивые загружать изображения или iframes, это очень распространенная практика, чтобы отметить их, заменив правильный src атрибут с аналогичным атрибутом данных, data-src затем полагаться на решение JavaScript для обнаружения, когда изображения / iframes становятся близкими к видимому часть веб-сайта (как правило, потому, что пользователь прокрутил вниз) и скопировать атрибуты данных в надлежащие, а затем инициирует отложенную загрузку их содержимого.

<img data-src="turtle.jpg" alt="Lazy turtle" class="lazy">

Родные Ленивый Загрузка

В соответствии с родной ленивый загрузки спецификации (по-прежнему находится в стадии разработки), если вы хотите ленивый загрузки изображений или iframes с помощью родной ленивый функции загрузки, вам просто нужно добавить loading=lazy атрибут на соответствующем теге.

<img src="turtle.jpg" alt="Lazy turtle" loading="lazy">

Эдди Османи много писал на эту тему в своей статье«Родной образ Ленивый-загрузка для Интернета!»в которой он заявил, что команда Google Chrome уже разрабатывает эту функцию и намерена отправить ее в Chrome 75.

Другие браузеры на основе chromium, такие как Opera и Microsoft Edge, также выиграют от этой разработки, получив ту же функцию в своем первом обновлении на основе Chromium 75.

Начало работы с родной ленивый загрузки

В случае, если изображения вашего сайта загружаются сразу при посадке на странице без ленивой загрузки, вы можете включить (где поддерживается) родной ленивый загрузки на вашем сайте так же легко, как добавление HTML атрибут. loadingАтрибут сообщает браузерам, какие изображения важно загрузить немедленно, а какие можно скачать лениво, как пользователи прокрутки вниз. Тот же атрибут можно применить к iframes.

Для того, чтобы сообщить браузерам, что определенное изображение важно, чтобы они могли загрузить его как можно скорее, необходимо добавить loading="eager" атрибут на img тег. Наилучшей практикой является сделать это для первичных изображений — как правило, для тех, которые будут отображаться выше раза.

<img src="rabbit.jpg" alt="Fast rabbit" loading="eager">

Чтобы сообщить браузерам, что изображение должно быть загружено лениво, просто добавьте loading="lazy" атрибут. Это лучшая практика, только если вы делаете это только для вторичных изображений — как правило, для них будет отображаться ниже раза.

<img src="turtle.jpg" alt="Lazy turtle" loading="lazy">

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

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

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

Не использовать для полизаполнения

Когда новая технология браузера выпущена в один браузер, сообщество с открытым исходным кодом обычно выпускает полизаполнение JavaScript, чтобы обеспечить ту же технологию для остальных браузеров. Например, IntersectionObserver полифильс использует элементы JavaScript и DOM для координации для Element.getBoundingClientRect() воспроизведения поведения родного API.

Но случай родной ленивой загрузки отличается тем, что JavaScript полизаполнения loading="lazy" для бы предотвратить браузеры от загрузки содержимого, как только они находят URL в разметке изображения или iframe. JavaScript не имеет контроля на этом начальном этапе рендеринга страниц, поэтому невозможно полизаполнить нативку наиродалений.

Гибридная ленивая загрузка

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

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

«

Для того, чтобы сделать гибридную ленивую загрузку, необходимо разметить свой ленивый контент, используя data атрибуты вместо реальных (например, в ленивой загрузке, управляемой JavaScript), и добавить loading="lazy" атрибут.

<img data-src="turtle.jpg" loading="lazy" alt="Lazy turtle">

Тогда вам требуется несколько JavaScript. В первую очередь, необходимо определить, поддерживается ли нативная ленивая загрузка браузером. Затем сделайте один из следующих элементов с loading="lazy" атрибутом:

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

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

if ('loading' in HTMLImageElement.prototype)

Если это так, просто скопируйте src значение атрибута из data-src . Если это не так, инициализируйте некоторые ленивые загрузки сценарий по вашему выбору.

Вот фрагмент кода, который делает это.

<!-- In-viewport images should be loaded normally, or eagerly -->
<img src="important.jpg" loading="eager" alt="Important image">

<!-- Let’s lazy-load the rest of these images -->
<img data-src="lazy1.jpg" loading="lazy" alt="Lazy image 1">
<img data-src="lazy2.jpg" loading="lazy" alt="Lazy image 2">
<img data-src="lazy3.jpg" loading="lazy" alt="Lazy image 3">

<script>
  (function() {
    if ("loading" in HTMLImageElement.prototype) {
      var lazyEls = document.querySelectorAll("[loading=lazy]");
      lazyEls.forEach(function(lazyEl) {
        lazyEl.setAttribute(
          "src",
          lazyEl.getAttribute("data-src")
        );
      });
    } else {
      // Dynamically include a lazy loading library of your choice
      // Here including vanilla-lazyload
      var script = document.createElement("script");
      script.async = true;
      script.src =
        "https://cdn.jsdelivr.net/npm/vanilla-lazyload@12.0.0/dist/lazyload.min.js";
      window.lazyLoadOptions = {
        elements_selector: "[loading=lazy]"
        //eventually more options here
      };
      document.body.appendChild(script);
    }
  })();
</script>

Вы можете найти и протестировать код выше в этом живом демо.

Тем не менее, это очень простой сценарий, и все может быть сложно, когда вы используете дополнительные атрибуты или теги, чтобы получить отзывчивые изображения (например, srcset и sizes атрибуты или даже picture и source теги).

Небольшая помощь третьей стороны

В течение последних четырех лет я поддерживала ленивый сценарий загрузки с открытым исходным кодом под названием vanilla-lazyload «И через пару дней после того, как Эдди Османи написала о родной ленивой загрузке, сообщество отреагировало, спросив меня, может ли мой сценарий выступать в качестве полизаполнения.

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

Начиная с версии 12 vanilla-lazyload из, вы можете просто установить use_native возможность для включения true гибридных ленивых загрузки. Скрипт только 2,0 кБ gzipped и он уже доступен на GitHub, npm, и jsDelivr.

Узнать vanilla-lazyload о GitHub

Демо

Вы можете начать играть с родной ленивый загрузки сегодня, загрузив Chrome Canary или Microsoft Edge Insider (dev channel), то включение флаги «Включить ленивый загрузки изображения» и «Включить ленивый кадр загрузки». Чтобы включить эти флаги, введите about:flags в поле URL-адреса вашего браузера и ищите «ленивый» в поле поиска.

Родные Ленивый Загрузка Демо

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

Тест родной ленивый загрузки демо

Чего ожидать:Все изображения получаются сразу, но с различными ответами HTTP. Те, с кодом ответа 200 являются охотно загруженных изображений, в то время как те, с кодом ответа 206 только частично извлечены для того, чтобы получить начальную информацию о изображениях. Эти изображения будут извлечены полностью с 200 кодом ответа при прокрутке вниз.

Гибридная ленивая загрузка Демо

Чтобы проанализировать, как работает гибридная ленивая загрузка, можно начать играть со следующей демонстрацией. Здесь vanilla-lazyload@12.0.0 используется и use_native опция установлена true на:

Тест гибридных ленивых загрузки демо

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

Пожалуйста, обратите внимание, что vanilla-lazyload использует IntersectionObserver API под капотом, так что вам нужно будет полизаполнить его на Internet Explorer и менее последние версии Safari. Это не большое дело, если polyfill не предоставляется, хотя, потому что в этом случае vanilla-lazyload будет просто скачать все изображения сразу.

Примечание: Подробнее читайте в материале«Чтобы Полизаполнени или не полизаполнение»глава vanilla-lazyload файла readme.

Попробуйте гибридную ленивую загрузку на вашем сайте

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

HTML Разметка

Простейшая разметка изображения сделана двумя атрибутами: src и alt .

Для изображений выше приведенного в сложенном уровне следует оставить src атрибут и добавить loading="eager" атрибут.

<img src="important.jpg" loading="eager" alt="Important image">

Для изображений ниже в упора следует заменить src атрибут атрибутом данных data-src и добавить loading="lazy" атрибут.

<img data-src="lazy.jpg" loading="lazy" alt="A lazy image">

Если вы хотите использовать отзывчивые изображения, сделайте то же самое с srcset sizes атрибутами.

<img alt="A lazy image" 
    loading="lazy" 
    data-src="lazy.jpg" 
    data-srcset="lazy_400.jpg 400w, lazy_800.jpg 800w" 
    data-sizes="100w">

Если вы предпочитаете использовать picture теги, изменить srcset , а также в sizes src source теги.

<picture>
    <source 
        media="(min-width: 1200px)" 
        data-srcset="lazy_1200.jpg 1x, lazy_2400.jpg 2x">
    <source 
        media="(min-width: 800px)" 
        data-srcset="lazy_800.jpg 1x, lazy_1600.jpg 2x">
    <img alt="A lazy image" 
        loading="lazy" 
        data-src="lazy.jpg">
</picture>

pictureТег также может быть использован для выборочной загрузки формата WebP для изображений.

Примечание: Если вы хотите узнать больше обычаев, vanilla-lazyload пожалуйста, прочитайте раздел HTML HTML своего файла чтения.

Код JavaScript

Прежде всего, вы должны включить vanilla-lazyload на вашем сайте.

Вы можете загрузить его из CDN, как jsDelivr:

<script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@12.0.0/dist/lazyload.min.js"></script>

Или вы можете установить его с помощью npm:

npm install vanilla-lazyload@12

Также можно использовать async скрипт с автоматической инициализацией; загрузить его в качестве модуля ES, используя type="module" или загрузив его как AMD с помощью RequireJS. Найдите другие способы включения и использования vanilla-lazyload в раздел«Начало»файла чтения.

Затем, в кодjavaScript вашего веб-сайта/веб-приложения, включите следующее:

var pageLazyLoad = new LazyLoad({
    elements_selector: "[loading=lazy]",
    use_native: true // ← enables hybrid lazy loading
});

Примечание: Скрипт имеет множество других параметров, которые можно использовать для настройки vanilla-lazyload поведения,например, чтобы увеличить расстояние области прокрутки, из которой начать загрузку элементов или для загрузки элементов, только если они остались в viewport для дали время. Найдите дополнительные настройки в разделе API файла readme.

Все вместе, используя `async` сценарий

Чтобы собрать все вместе и использовать async скрипт для максимизации производительности, пожалуйста, обратитесь к следующему HTML и JavaScript код:

<!-- In-viewport images should be loaded normally, or eagerly -->
<img src="important.jpg" loading="eager" alt="Important image">

<!-- Let’s lazy-load the rest of these images -->
<img data-src="lazy1.jpg" loading="lazy" alt="Lazy image 1">
<img data-src="lazy2.jpg" loading="lazy" alt="Lazy image 2">
<img data-src="lazy3.jpg" loading="lazy" alt="Lazy image 3">

<!-- Set the options for the global instance of vanilla-lazyload -->
<script>
  window.lazyLoadOptions = {
    elements_selector: "[loading=lazy]",
    use_native: true // ← enables hybrid lazy loading
  };
</script>

<!-- Include vanilla lazyload 12 through an async script -->
<script async src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@12.0.0/dist/lazyload.min.js"></script>

Ну вот! С помощью этих очень простых и простых шагов, вы позволите гибрид ленивый загрузки в вашем сайте!

Важные рекомендации

Применить ленивые загрузки только на изображения, которые вы знаете, что, вероятно, будет отображаться ниже раза. Стремясь загрузить те, выше раза, чтобы максимизировать производительность. Если вы просто примените ленивую нагрузку ко всем изображениям на странице, вы замедлите производительность рендеринга.
Используйте CSS, чтобы зарезервировать некоторое пространство для изображений, прежде чем они будут загружены. Таким образом, они будут толкать остальную часть содержания ниже. Если вы этого не сделаете, большее количество изображений будет размещено выше раза, прежде чем они должны, вызывая немедленную загрузку для них. Если вам нужен трюк CSS, чтобы сделать это, вы можете найти один в разделе советы и приемы readme vanilla-lazyload .

Плюсы и минусы

	РОДНОЙ ЛЕНИВЫЙ ПОГРУЗКИ
Плюсы	JavaScript не требуется; Нет головной боли установки, он просто работает; Нет необходимости резервировать место для изображений с помощью трюков CSS;
Минусы	Он не работает сегодня на всех браузерах; Начальная полезная нагрузка выше, из-за предпосылки первоначальных 2 кб для каждого изображения.

	ЯВАСКРИПТ-УПРАВЛЯЕМЫЙ ЛЕНИВАЯ ЗАГРУЗКА
Плюсы	Он работает последовательно во всех браузерах, прямо сейчас; Вы можете выполнять очень высоко настроенные трюки с uI, такие как эффект размытия или задержка загрузки.
Минусы	Он полагается на JavaScript для загрузки содержимого.

	ГИБРИДНАЯ ЛЕНИВАЯ ЗАГРУЗКА
Плюсы	Это дает вам возможность включить и проверить родной ленивый загрузки, где поддерживается; Это позволяет ленивый загрузки на всех браузерах; Вы можете прозрачно удалить зависимость от скрипта, как только поддержка нативной ленивой загрузки будет широко распространена.
Минусы	Он по-прежнему полагается на JavaScript для загрузки содержимого.

ГИБРИДНАЯ ЛЕНИВАЯ ЗАГРУЗКА

Плюсы

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

Минусы

Он по-прежнему полагается на JavaScript для загрузки содержимого.

Упаковка

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

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

Попробуй! Не забудьте звезды / смотреть vanilla-lazyload на GitHub, и дайте мне знать ваши мысли в разделе комментариев.

Дальнейшее чтение на SmashingMag:

Источник: smashingmagazine.com

Гибридная ленивая загрузка: прогрессивная миграция к родной ленивой загрузке

Родные против JavaScript-Driven Ленивый загрузки

JavaScript-Driven Ленивый загрузки

Родные Ленивый Загрузка

Начало работы с родной ленивый загрузки

Не использовать для полизаполнения

Гибридная ленивая загрузка

Небольшая помощь третьей стороны

Демо

Родные Ленивый Загрузка Демо

Гибридная ленивая загрузка Демо

Попробуйте гибридную ленивую загрузку на вашем сайте

HTML Разметка

Код JavaScript

Все вместе, используя `async` сценарий

Важные рекомендации

Плюсы и минусы

Упаковка

Дальнейшее чтение на SmashingMag:

Понравилось это:

Похожее

Добавить комментарийОтменить ответ

Родные против JavaScript-Driven Ленивый загрузки

JavaScript-Driven Ленивый загрузки

Родные Ленивый Загрузка

Начало работы с родной ленивый загрузки

Не использовать для полизаполнения

Гибридная ленивая загрузка

Небольшая помощь третьей стороны

Демо

Родные Ленивый Загрузка Демо

Гибридная ленивая загрузка Демо

Попробуйте гибридную ленивую загрузку на вашем сайте

HTML Разметка

Код JavaScript

Все вместе, используя async сценарий

Важные рекомендации

Плюсы и минусы

Упаковка

Дальнейшее чтение на SmashingMag:

Sharing is caring

Понравилось это:

Похожее

Добавить комментарийОтменить ответ

Все вместе, используя `async` сценарий