1. 👨‍💻 Начало работы - HTML
2. Ленивое изображение:
3. Ленивое изображение с заполнителем низкого качества:
4. Ленивый отзывчивый образ с srcset и размерами:
5. Ленивое адаптивное изображение с поддержкой hi-dpi с использованием тега picture:
6. Ленивое фоновое изображение
7. Ленивое видео
8. Ленивый iframe
9. 👩‍💻 Начало работы - скрипт
10. Полифилл или нет Полифил IntersectionObserver?
11. Самый простой способ
12. Включить через RequireJS
13. Использование асинхронного скрипта
14. Использование асинхронного скрипта + получение ссылки на экземпляр
15. Локальная установка
16. Используя npm
17. Используя беседку
18. Ручная загрузка
19. Локальное использование
20. Использование с React
21. Связки
22. 🥧 рецепты
23. Динамический контент
24. Панель прокрутки
25. Задержка загрузки
26. Lazy LazyLoad
27. 📺 Демоверсии
28. 😋 Советы и хитрости
29. Показать изображения во время загрузки
30. НЕ используйте изображения-заполнители
31. Работа с проблемами Microsoft Edge
32. 🔌 API
33. Опции
34. методы
35. 😯 Известные особенности
36. API-интерфейс Intersection Observer для оптимизации использования ЦП
37. Поддержка адаптивных изображений
38. SEO дружественный
39. Проверено на реальных браузерах

LazyLoad - это быстрый, легкий и гибкий скрипт, который ускоряет работу вашего веб-приложения , загружая изображения, видео и фреймы контента только при входе в область просмотра . Он написан на простом «ванильном» JavaScript, он использует IntersectionObserver API, работает с адаптивные изображения и он поддерживает родную ленивую загрузку. Увидеть заметные особенности для большего.

➡️ Перейти к: 👨‍💻 Начало работы - HTML - 👩‍💻 Начало работы - скрипт - 🥧 рецепты - 📺 Демоверсии - 😋 Советы и хитрости - 🔌 API - 😯 Известные особенности

👨‍💻 Начало работы - HTML

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

Ленивое изображение:

<img alt = "Ленивое изображение" data-src = "lazy.jpg">

Ленивое изображение с заполнителем низкого качества:

<img alt = "Ленивое изображение" src = "lazy-lowQuality.jpg" data-src = "lazy.jpg">

Ленивый отзывчивый образ с srcset и размерами:

<img alt = "Ленивое изображение" class = "lazy" data-src = "lazy.jpg" data-srcset = "lazy_400.jpg 400w, lazy_800.jpg 800w" data-sizes = "100w">

Чтобы иметь заполнитель низкого качества, добавьте атрибут src, указывающий на очень маленькую версию изображения. Например, src = "lazy_10.jpg".

Ленивое адаптивное изображение с поддержкой hi-dpi с использованием тега picture:

<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 =" Ленивое изображение "class =" lazy "data-src =" lazy.jpg "> </ picture>

Чтобы использовать заполнитель низкого качества, добавьте атрибут src, указывающий на очень маленькую версию изображения, в тег img. Например, src = "lazy_10.jpg".

<picture> <source type = "image / webp" data-srcset = "lazy_400.webp 400 Вт, lazy_800.webp 800 Вт" data-sizes = "100 Вт"> <img alt = "Lazy image" class = "lazy" data -src = "lazy.jpg" data-srcset = "lazy_400.jpg 400 Вт, lazy_800.jpg 800 Вт" data-sizes = "100 Вт"> </ picture>

Чтобы использовать заполнитель низкого качества, добавьте атрибут src, указывающий на очень маленькую версию изображения, в тег img. Например, src = "lazy_10.jpg".

Ленивое фоновое изображение

Единый фон

<div class = "lazy" data-bg = "url (lazy.jpg)"> </ div>

Несколько фонов

<div class = "lazy" data-bg = "url (lazy-head.jpg), url (lazy-body.jpg), линейный градиент (#fff, #ccc)"> ... </ div>

Заметки:

• вам нужно использовать url () в значении вашего атрибута data-bg, также для отдельного фона
• Вы не должны использовать фоновые изображения для загрузки изображений контента, они вредны для SEO и доступности
• на фоновых изображениях callback_loaded не будет вызываться, а класс class_loaded не будет добавлен

Ленивое видео

<video class = "lazy" управляет width = "620" data-src = "lazy.mp4" poster = "lazy.jpg"> <source type = "video / mp4" data-src = "lazy.mp4"> < source type = "video / ogg" data-src = "lazy.ogg"> <source type = "video / avi" data-src = "lazy.avi"> </ video>

Ленивый iframe

<iframe class = "lazy" data-src = "lazyFrame.html" poster = "lazy.jpg"> </ iframe>

👩‍💻 Начало работы - скрипт

Последняя, ​​рекомендуемая версия LazyLoad: 12.0.0 .

Полифилл или нет Полифил IntersectionObserver?

В браузере, НЕ поддерживающем IntersectionObserver, таком как Internet Explorer и более ранние версии Safari, вы можете выбрать, добавлять ли для него полизаполнение javascript .

Если вы не используете polyfill , LazyLoad загрузит все изображения, как только он будет загружен и выполнен. Количество затронутых пользователей будет относительно маленький так что это вполне приемлемый выбор.

Если вы предпочитаете загружать полифилл, то предоставляется обычное поведение LazyLoad.

Самый простой способ

Самый простой способ использовать LazyLoad - включить скрипт из CDN:

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

Или с помощью полизаполнения IntersectionObserver:

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

Затем в вашем коде JavaScript:

var lazyLoadInstance = new LazyLoad ({elements_selector: ".lazy" // ... дополнительные пользовательские настройки?});

Чтобы быть уверенным, что DOM для вашего ленивого контента готов, когда вы создаете экземпляр LazyLoad, поместите тег script прямо перед закрывающим тегом </ body> . Если позднее поступит больше DOM, например, с помощью вызова AJAX, вам необходимо вызвать lazyLoadInstance.update (); чтобы LazyLoad снова проверил DOM.

if (lazyLoadInstance) {lazyLoadInstance. Обновить (); }

Включить через RequireJS

Ты можешь использовать RequireJS динамически и асинхронно загружать модули на ваш сайт.

Вы также можете найти оригинальный W3C'S IntersectionObserver Polyfill упакован в AMD так что вы можете потребовать это условно вместе с LazyLoad.

Включить RequireJS:

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

Затем потребуйте версию LazyLoad для AMD, например:

var lazyLoadAmdUrl = "https://cdn.jsdelivr.net/npm/[email protected]/dist/lazyload.amd.min.js"; var polyfillAmdUrl = "https://cdn.jsdelivr.net/npm/[email protected]/intersection-observer-amd.js"; /// Динамически определять зависимости var dependencies = ["IntersectionObserver" в окне? null // <- не требует полизаполнения: polyfillAmdUrl, lazyLoadAmdUrl]; // Инициализировать LazyLoad внутри callback require (зависимости, функция (_, LazyLoad) {var lazyLoadInstance = new LazyLoad ({elements_selector: ".lazy" // ... больше пользовательских настроек?});}

DEMO - ИСТОЧНИК

Использование асинхронного скрипта

При желании можно включить скрипт LazyLoad с помощью асинхронного скрипта и инициализировать его, как только он будет загружен.

Для этого вы должны определить параметры перед включением скрипта . Вы можете пройти:

• {} объект для получения одного экземпляра LazyLoad
• [{}, {}] массив объектов для получения нескольких экземпляров LazyLoad, каждый из которых имеет разные параметры.

<script> // Устанавливаем опции, чтобы LazyLoad самостоятельно инициализировал окно. lazyLoadOptions = {elements_selector: ".lazy", // ... больше пользовательских настроек? }; </ Скрипт>

Затем включите сценарий.

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

Возможно, поместите тег script прямо перед закрывающим тегом </ body> . Если вы не можете этого сделать, LazyLoad может быть выполнен до того, как браузер загрузит весь DOM, и вам нужно вызвать его метод update (), чтобы он снова проверил DOM.

Использование асинхронного скрипта + получение ссылки на экземпляр

То же, что и выше, но вы должны поместить код addEventListener, показанный ниже, прежде чем включать асинхронный скрипт.

<script> // Устанавливаем опции, чтобы LazyLoad самостоятельно инициализировал окно. lazyLoadOptions = {elements_selector: ".lazy", // ... больше пользовательских настроек? }; // Прослушивание события инициализации и получение экземпляра окна LazyLoad. addEventListener ('LazyLoad :: Initialized', функция (событие) {window. lazyLoadInstance = событие. detail. instance;}, false); </ Скрипт>

Затем включите сценарий.

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

Теперь вы сможете вызывать его методы, например:

if (lazyLoadInstance) {lazyLoadInstance. Обновить (); }

Примечание об Internet Explorer: потому что этот метод использует CustomEvent ( учить больше ), чтобы вызвать событие LazyLoad :: Initialized, вы можете добавить этот микрополифильтр, чтобы он работал в Internet Explorer.

<script> // Микрополифильм CustomEvent для Internet Explorer (function () {if (typeof window. CustomEvent === "function") {return false;} функция CustomEvent (событие, params) {params = params || {bubbles : ложь, отмена: ложь, деталь: не определено}; var evt = document. createEvent ("CustomEvent"); evt. initCustomEvent (событие, params. пузырьки, params. cancellable, params. detail); вернуть evt;} CustomEvent. prototype = окно. Событие. прототип; окно. CustomEvent = CustomEvent;}) (); </ Скрипт>

Локальная установка

Если вы предпочитаете устанавливать LazyLoad локально в своем проекте, вы можете!

Используя npm

npm установить vanilla-lazyload

Используя беседку

беседка установить ванильно-ленивый

Ручная загрузка

Скачать один последний релизы , Необходимые файлы находятся в папке dist. Если вы не знаете, какой из них выбрать, используйте lazyload.min.js или прочитайте о связках ,

Локальное использование

Если вы устанавливаете LazyLoad локально, вы можете импортировать его как модуль ES следующим образом:

импорт LazyLoad из "ванильно-ленивый";

Также возможно (но без предупреждения) использовать синтаксис require commonJS.

Больше информации о комплектации LazyLoad с WebPack доступно на этот конкретный репо ,

Использование с React

Взгляните на этот пример использование React с LazyLoad на песочнице.

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

Связки

Внутри папки dist вы найдете различные пакеты.

Имя модуля Тип модуля Преимущества lazyload.min.js UMD (определение универсального модуля) Работает практически везде, даже в контексте common-js. Lazyload.iife.min.js IIFE (выражение для немедленного вызова функции) Работает как на странице <script src = " ... ">, ~ на 0,5 КБ меньше, чем версия UMD lazyload.amd.min.js AMD (определение асинхронного модуля) работает с загрузчиком модулей RequireJS , на ~ 0,5 КБ меньше, чем версия UMD lazyload.esm.js Модуль ES экспортирует LazyLoad, так что вы можете импортировать его в свой проект, используя <script type = "module" src = "..."> и такой пакет, как WebPack или Rollup

🥧 рецепты

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

Динамический контент

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

HTML

Используемый HTML зависит от вашего случая, см. HTML других рецептов.

Javascript

var myLazyLoad = new LazyLoad (); // После того, как ваш контент изменился ... myLazyLoad. Обновить ();

DEMO - ИСТОЧНИК - API

Панель прокрутки

💡 Вариант использования : когда контейнер с прокруткой - это не главное окно браузера, а контейнер с прокруткой.

HTML

<div class = "scrollingPanel" id = "scrollingPanel"> <! - Набор изображений -> </ div>

Javascript

var myLazyLoad = new LazyLoad ({container: document. getElementById ('scrollingPanel')});

DEMO - ИСТОЧНИК - API

Если у вас несколько панелей прокрутки, вы можете использовать следующую разметку и код.

HTML

<div id = "scrollingPanel1" class = "scrollingPanel"> <! - Набор изображений -> </ div> <div id = "scrollingPanel2" class = "scrollingPanel"> <! - Набор изображений -> </ DIV>

Javascript

var myLazyLoad1 = new LazyLoad ({container: document. getElementById ('scrollingPanel1')}); var myLazyLoad2 = new LazyLoad ({container: document. getElementById ('scrollingPanel2')});

DEMO - ИСТОЧНИК - API

Задержка загрузки

Case Вариант использования : если вы быстро прокручиваете изображения, вы можете подождать некоторое время, прежде чем они начнут загружаться. Это как.

HTML

<img class = "lazy" alt = "Ленивое изображение" data-src = "lazy.jpg" width = "220" height = "280">

Javascript

var myLazyLoad = new LazyLoad ({elements_selector: ".lazy", load_delay: 300 // настроить в соответствии с вариантом использования});

Lazy LazyLoad

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

HTML

<div class = "horzContainer"> <img src = "" alt = "Строка 01, столбец 01" data-src = "https://placeholdit.imgix.net/~text?txtsize=19&amp;txt=row_01_col_01&amp;w = 200 & h = 200 "> <img src =" "alt =" Строка 01, столбец 02 "data-src =" https://placeholdit.imgix.net/~text?txtsize=19&amp;txt=row_01_col_02&amp;w = 200 & h = 200 "> <! - ... -> </ div> <div class =" horzContainer "> <img src =" "alt =" Строка 02, столбец 01 «data-src =» https://placeholdit.imgix.net/~text?txtsize=19&amp;txt=row_02_col_01&amp;w=200&amp;h=200 "> <img src =" "alt =" Строка 02, столбец 02 «data-src =» https://placeholdit.imgix.net/~text?txtsize=19&amp;txt=row_02_col_02&amp;w=200&amp;h=200 "> <! - ... -> </ div>

Javascript

var lazyLoadInstances = []; // Экземпляр lazyLazy "lazyLazy" используется (вроде неправильно) // для проверки, когда диваны .horzContainer входят в область просмотра var lazyLazy = new LazyLoad ({elements_selector: ".horzContainer", // Когда див. .HorzContainer входит в viewport ... callback_enter: function (el) {// ... создать новую LazyLoad на нем var oneLL = new LazyLoad ({container: el}); // опционально вставить его в массив lazyLoadInstances //, чтобы отслеживать экземпляры lazyLoadInstances. push (oneLL);}});

Вот и все. Всякий раз, когда элемент .horzContainer входит в область просмотра, LazyLoad вызывает функцию callback_enter, которая создает новый экземпляр LazyLoad для элемента .horzContainer.

DEMO - ИСТОЧНИК - API

📺 Демоверсии

Не нашел рецепт это точно соответствует вашему случаю? У нас есть демоверсии!

демос папка содержит более 20 вариантов использования LazyLoad. Вы можете найти там то, что вы ищете.

Тип Название Код Live Демо Контент Простое ленивое загруженное изображение Код Жить Содержимое Lazy отзывчивые изображения с srcset Код Жить Содержимое Lazy отзывчивые изображения с тегом <picture> и атрибутом media (художественное направление) Код Жить Содержимое Lazy отзывчивые изображения с srcset и размерами (с использованием размеров данных) Код Жить Содержимое Lazy отзывчивые изображения с srcset и размерами (используя простые размеры) Код Жить Содержимое Ленивое видео с несколькими тегами <source> Код Жить Содержание Ленивая загрузка фоновых изображений Код Жить Содержимое Lazy WebP изображений с тегом <picture> и атрибутом типа для WebP Код Жить Загрузка асинхронной загрузки LazyLoad с requireJS Код Жить Загрузка асинхронной загрузки LazyLoad + InterserctionObserver с requireJS Код Жить Загрузка асинхронной загрузки LazyLoad с помощью <script async> Код Жить Техника исчезает в изображениях при загрузке Код Жить Техника лениво создавать ленивые экземпляры Код Жить Техника Как управлять печатью страницы с ленивыми изображениями Код Жить Техника Всплывающий слой, содержащий ленивые изображения в контейнере с прокруткой Код Жить Настройки нескольких контейнеров прокрутки Код Жить Настройки Одной прокрутки контейнера Код Жить Настройки Задержка загрузки ленивых изображений Код Жить Методы Как уничтожить () LazyLoad Код Жить Методы Добавление динамического содержимого, затем update () LazyLoad Код Жить Методы Добавление динамического содержимого, затем update () LazyLoad, передавая NodeSet элементов Код Жить Методы Загрузите пунктуальные изображения, используя метод load () Код Жить Методы Загрузите все изображения одновременно, используя loadAll () Код Жить Тест Тест для нескольких порогов Код Жить Тест Тест поведения со скрытыми изображениями Код Жить Тест Тест задержки загрузки Код Жить Тест Тест производительности, ленивая загрузка сотен изображений Код Жить Нативный Тест родной ленивой загрузки изображений БЕЗ любой строчки javascript, даже этого скрипта Код Жить Native. Тестируйте собственную ленивую загрузку изображений условно, используя опцию use_native (см. API). Код Жить (прежняя версия) Условная загрузка v.8 или v.10 (без заполнения IntersectionObserver) Код Жить

😋 Советы и хитрости

Занимайте вертикальное пространство и поддерживайте соотношение

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

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

.image-wrapper {width: 100%; высота: 0; набивка снизу: 66,67%; / * Вы определяете это, делая высоту / ширину * 100% * / position: относительный; } .image {ширина: 100%; / * высота: авто; * / позиция: абсолютная; }

Больше информации в Определение размеров контейнеров изображений с небольшим CSS-дополнением Энди Шора.

Есть также полезный миксин SASS для сохранять пропорции на хитрости CSS.

@mixin aspect-ratio ($ width, $ height) {позиция: относительная; &: before {display: block; содержание: ""; ширина: 100%; padding-top: ($ высота / $ ширина) * 100%; }> .content {position: absolute; верх: 0; слева: 0; справа: 0; низ: 0; }}

Показать изображения во время загрузки

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

Чтобы сделать ваши изображения видимыми, как только LazyLoad установит для него атрибут src / srcset, вы можете:

Сделайте это с помощью CSS:

/ * Предотвращает появление img без src * / img: not ([src]) {visibility: hidden; }

Или вместо вышеперечисленного: селектор not () делает это, используя CSS-классы class_loading и class_loaded, установленные LazyLoad, когда загрузка начинается или завершается - см. API ,

НЕ используйте изображения-заполнители

Мы не рекомендуем использовать изображение-заполнитель (например, прозрачный пиксель GIF) в вашем HTML.

• Для лучшего восприятия производительности оставьте атрибуты src и srcset пустыми . При этом изображение будет показано, как только LazyLoad начнет загружать изображение. Увидеть это видео или же эта ручка проверить разницу (не забудьте отключить кэш и установить более медленную скорость соединения, если у вас очень высокая скорость).
• Если вы поместите что-нибудь в src (например, прозрачный GIF), LazyLoad начнет загружать изображение, но оно не будет отображаться браузерами, пока не будет загружено новое изображение, что приведет к ухудшению воспринимаемой производительности .

Безопасно не помещать никаких значений в атрибуты src, ни srcset, даже если ваш HTML не будет проверен статическим анализатором кода. Причина в том, что после выполнения JavaScript эти значения будут установлены LazyLoad. Для SEO, если клиент является сканером, таким как Googlebot, он будет обнаружен LazyLoad, который исправит HTML.

Работа с проблемами Microsoft Edge

Согласно тому, что сообщалось в # 152, чтобы Microsoft Edge запускал IntersectionObserver для элемента img, он должен иметь размер. Так как imgs отображаются в виде встроенного блока как стандарт, MS Edge (версия не указана) не читает их правильно.

Установив следующее, Edge может видеть изображения, и они загружаются.

img [data-src], img [data-srcset] {display: block; минимальная высота: 1px; }

🔌 API

Аргументы конструктора

Новая инструкция LazyLoad (), которую вы выполняете на своей странице, может принимать два параметра:

Параметр Что передать Обязательное Значение по умолчанию Тип Параметры Объект объекта для этого экземпляра LazyLoad No {} Nodeset Node Plain Object A Набор элементов для выполнения LazyLoad в No null NodeSet

Наиболее распространенное использование конструктора LazyLoad - передача только объекта параметров (см. «Параметры» в следующем разделе). Например:

var aLazyLoad = new LazyLoad ({/ * опции здесь * /});

В тех редких случаях, когда вы не можете или не хотите выбирать элементы с помощью elements_selector, и у вас есть ссылочная переменная для вашего набора элементов (может быть NodeSet или массивом элементов), вы можете передать набор элементов как Второй параметр

var elementsToLazyLoad = getElementSetFromSomewhere (); var aLazyLoad = new LazyLoad ({/ * опции здесь * /}, elementsToLazyLoad);

Опции

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

Имя Значение Значение по умолчанию Пример значения контейнера Контейнер элементов в опции elements_selector. document document.querySelector ('. scrollPanel') elements_selector Селектор CSS для элементов, загружаемых лениво, которые будут выбраны в качестве потомков объекта-контейнера. Порог «img» «.images img.lazy» Число пикселей, представляющих внешнее расстояние от области прокрутки, с которого начинается загрузка элементов. 300 0 пороговые значения Аналогично пороговому значению, но могут принимать несколько значений и в единицах пикселей и%. Он отображается непосредственно на свойство rootMargin IntersectionObserver ( прочитайте больше ), поэтому это должна быть строка с синтаксисом, аналогичным свойству CSS margin. Вы можете использовать его, когда вам нужно иметь разные пороги для области прокрутки. Это преодолевает порог, когда прошло. null «500px 10%» data_src Имя атрибута данных, содержащего исходный источник изображения, за исключением части «data-». Например, если ваш атрибут данных называется «data-src», просто передайте «src» «src» «original» data_srcset Имя атрибута данных, содержащего исходный источник изображения, заданный в тегах img и source, исключая «data-» часть. Например, если ваш атрибут данных называется «data-srcset», просто передайте «srcset» «srcset» «original-set» data_sizes Имя атрибута данных, содержащего используемый атрибут размеров, исключая часть «data-». Например, если ваш атрибут данных называется «data-размеры», просто передайте «размеры» «размеры» null data_bg Имя атрибута данных, содержащего значение background-image для ленивой загрузки, исключая часть «data-». Например, если ваш атрибут данных называется «data-bg», просто передайте «bg». Значение атрибута должно быть допустимым значением для background-image, включая часть url () инструкции CSS. "bg" "url (img1.jpg), url (img2.jpg)" class_loading Класс, применяемый к элементам во время загрузки. "loading" "lazy-loading" class_loaded Класс, применяемый к элементам после завершения загрузки. "Загружен" "Ленивый загружен" class_error Класс, применяемый к элементам, когда элемент вызывает ошибку. "error" "lazy-error" load_delay Время (в миллисекундах), в течение которого каждое изображение должно оставаться в области просмотра, прежде чем начнется его загрузка. 0 300 auto_unobserve Логическое значение, определяющее, следует ли автоматически отменять наблюдение за уже обнаруженными элементами. True false callback_enter Функция обратного вызова, которая вызывается при каждом входе элемента в область просмотра. null (el) => {console.log ("Entered", el)} callback_exit Функция обратного вызова, которая вызывается всякий раз, когда элемент покидает область просмотра. null (el) => {console.log ("Exited", el)} callback_reveal Функция обратного вызова, которая вызывается всякий раз, когда начинается загрузка элемента. null (el) => {console.log ("Загрузка", el)} callback_set Устаревший с версии 11 → Он все еще работает, но, пожалуйста, обновите ваш код, чтобы использовать вместо него callback_reveal. null (el) => {console.log ("Loading", el)} callback_loaded Функция обратного вызова, которая вызывается всякий раз, когда элемент заканчивает загрузку. null (el) => {console.log ("Loaded", el)} callback_error Функция обратного вызова, которая вызывается всякий раз, когда элемент вызывает ошибку. null (el) => {console.log ("Error", el)} callback_finish Функция обратного вызова, которая вызывается, когда больше нет элементов для загрузки, и все элементы были загружены. null () => {console.log ("Finish")} use_native Этот логический параметр определяет, следует ли использовать родная ленивая загрузка , В браузерах, которые его поддерживают, LazyLoad устанавливает атрибут loading = "lazy" для изображений и фреймов и передает их загрузку браузеру. ложь Правда

методы

Вы можете вызывать следующие открытые методы для любого экземпляра LazyLoad.

Имя метода Effect update () Сделайте LazyLoad для проверки новых ленивых изображений в контейнере, используя опцию elements_selector. loadAll () Загружает все ленивые изображения сразу, независимо от того, находятся они внутри или вне области просмотра. load (element, force) Немедленно загружает любой ленивый элемент, даже если он не выбирается параметром elements_selector. Обратите внимание, что этот метод работает только один раз для определенного элемента, если только вы не принудительно передадите ему значение true в качестве второго параметра. destroy () Уничтожает экземпляр, сбрасывает переменные экземпляра и удаляет прослушиватели.

😯 Известные особенности

Работает с вашей любимой библиотекой или фреймворком

Поскольку LazyLoad не полагается на jQuery, вы можете использовать его в веб-приложениях, использующих Angular , React или Vue.js, без необходимости включать jQuery.

API-интерфейс Intersection Observer для оптимизации использования ЦП

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

Поддержка адаптивных изображений

LazyLoad поддерживает адаптивные изображения как с помощью атрибутов srcset и sizes, так и с помощью тега picture.

SEO дружественный

LazyLoad не скрывает ваши изображения от поисковых систем , даже если вы не указываете исходный src для вашего изображения.

Проверено на реальных браузерах

Устаревшие браузеры поддерживаются с IE 9 и выше. Этот скрипт тестируется в каждом браузере перед каждым выпуском с использованием BrowserStack в прямом эфире, благодаря инициативе BrowserStack Open Source.