6 апреля 2019 года Эдди Османи написала о ленивой загрузке нативных изображений. Двумя днями позже Ивен, фронтенд-разработчик из Парижа, спросил меня, может ли моя ванильная ленивая загрузка быть полифиллом атрибута загрузки, вдохновив меня на разработку и выпуск версии 12 скрипта, в которой есть новая use_nativeопция для включения встроенная отложенная загрузка, где она поддерживается. Вы можете использовать его уже сегодня.

Чего ждать?

Если вы пропустили статью Эдди Османи, можно будет нативно лениво загружать изображения с помощью атрибута loading="lazy" для изображений и фреймов, и это уже возможно в Chrome 75 (в настоящее время Canary).

<img loading="lazy" src="...">
<iframe loading="lazy" src="...">

Браузеры сначала извлекают крошечную часть изображений (~ 2 КБ), чтобы получить некоторую начальную информацию (например, размер), а затем извлекают остальные, когда они собираются войти в область просмотра.

Проблема в том, что если вы напрямую назначите src (и/или srcset) изображениям, браузеры, которые до сих пор не поддерживают встроенную ленивую загрузку, загрузят их все сразу, а этого вы, возможно, захотите избежать, чтобы сохранить пропускную способность. и ускорьте свой веб-сайт или веб-приложение.

По этой причине я добавил параметр use_native в версию 12 vanilla-lazyload, который включает встроенную отложенную загрузку там, где она поддерживается.

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

Браузер, который вам нужен

По состоянию на 10 апреля 2019 года нативная ленивая загрузка находится на ранних стадиях (предварительная версия для разработчиков) и доступна только в Chrome 75 (в настоящее время Canary) и под флагом. Итак, чтобы протестировать его, вам нужно:

  1. Скачать Chrome Canary и установить его
  2. В Chrome Canary перейдите по URL-адресу chrome://flags и включите следующие флаги: Включить отложенную загрузку изображений + Включить отложенную загрузку iframe
  3. Перезапустите Chrome Canary

Демо

Теперь, когда у вас есть браузер Chrome Canary с включенной встроенной отложенной загрузкой, вы можете приступить к посещению следующей демонстрационной страницы.

→ Открыть демо и/или Проверить код

Если вы все сделали правильно, то произойдет вот что:

  • В Chrome 75 (Canary) LazyLoad запускает встроенную ленивую загрузку.
  • В других браузерах и более старых версиях Chrome будет происходить отложенная загрузка на основе js.

Попробуйте на своем сайте!

Для того, чтобы попробовать это самостоятельно, вам необходимо выполнить следующие шаги.

Разметка

Изображения в области просмотра/в верхней части страницы должны иметь обычные теги <img>. Использование data-src приведет к отключению сканера предварительной загрузки браузера, поэтому мы хотим избежать его из соображений производительности. Кроме того, вы можете использовать атрибут loading="eager", чтобы убедиться, что они загружаются как можно скорее.

<img 
    src="eager-eagle.jpg" 
    loading="eager"
    alt="Eager Eagle" 
/>

Для изображений вне области просмотра/ниже сгиба вы все равно должны использовать data-src, data-srcset и data-sizes, чтобы избежать быстрой загрузки в неподдерживаемых браузерах.

<img
    data-src="lazy-sloth.jpg"
    class="lazy"
    alt="Lazy Sloth"
/>

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

Теперь к коду Javascript!

Вам понадобится vanilla-lazyload версии 12 (в настоящее время в бета-версии).

Вы можете включить его через CDN:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/lazyload.min.js"></script>

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

npm install [email protected]

В коде установите для параметра use_native значение true при создании экземпляра LazyLoad:

new LazyLoad({
    elements_selector: `.lazy`,
    use_native: true // This one
})

Опция use_native гарантирует, что:

  • там, где поддерживается собственная ленивая загрузка, LazyLoad добавляет к изображениям атрибут loading="lazy", а затем просто меняет атрибуты data-* на правильные. Теперь браузер сам будет управлять ленивой загрузкой.
  • там, где собственная ленивая загрузка НЕ ​​поддерживается, ленивая загрузка по-прежнему управляется Javascript.

Вывод

Сегодня вы можете иметь как встроенную ленивую загрузку, так и ленивую загрузку на основе js, используя vanilla-lazyload 12, просто установив для параметра use_native значение true.

Если у вас есть вопросы, не стесняйтесь обращаться ко мне. В Твиттере я @verlok.