Скачать vanilla lazyload - скачать исходный код vanilla lazyload

LazyLoad — это легкий (2,4 КБ) и гибкий скрипт, который ускоряет работу вашего веб-приложения, откладывая загрузку изображений, расположенных ниже сгиба, анимированных SVG-файлов, видео и iframe до того момента, когда они войдут в область просмотра . Он написан на простом «ванильном» JavaScript, использует API IntersectionObserver, поддерживает адаптивные изображения, оптимизирует ваш веб-сайт для более медленных соединений и может включать встроенную отложенную загрузку. Ознакомьтесь со всеми функциями, чтобы узнать больше.

➡️ Перейти к: ?‍ Начало работы – HTML – ?‍ Начало работы – Скрипт – ? Рецепты - Демо - ? Советы и рекомендации - ? API - ? Все функции в сравнении

Нравится этот проект? ? Купи мне кофе!

?‍ Начало работы – HTML

Чтобы ваш контент загружался с помощью LazyLoad, вы должны использовать некоторые атрибуты data- вместо реальных атрибутов. Примеры ниже.

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

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

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

 < img alt =" A lazy image " class =" lazy " src =" lazy-lowQuality.jpg " data-src =" lazy.jpg " />

Ленивое адаптивное изображение с `srcset` и `sizes` :

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

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

Ленивое адаптивное изображение с поддержкой высокого разрешения с использованием тега `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 =" A lazy image " class =" lazy " data-src =" lazy.jpg " />
</ picture >

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

Ленивое адаптивное изображение с автоматическим выбором формата WebP с использованием тега `picture` :

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

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

ВАЖНОЕ ПРИМЕЧАНИЕ . Чтобы отображать изображения контента на своих страницах, всегда используйте тег img . Это пойдет на пользу SEO и доступности вашего сайта. Чтобы понять, являются ли ваши изображения контентом или фоном, спросите себя: «Хотел бы пользователь моего веб-сайта видеть эти изображения при распечатке страницы?». Если ответ «да», то ваши изображения являются изображениями контента, и вам следует избегать использования фоновых изображений для их отображения.

Одно фоновое изображение:

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

Одиночный фон с поддержкой экрана HiDPI:

 < div class =" lazy " data-bg =" lazy.jpg " data-bg-hidpi =" [email protected] " > </ div >

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

 < div
  class =" lazy "
  data-bg-multi =" url(lazy-head.jpg), 
    url(lazy-body.jpg), 
    linear-gradient(#fff, #ccc) "
>
  ...
</ div >

Несколько фонов, поддержка экрана HiDPI:

 < div
  class =" lazy "
  data-bg-multi =" url(lazy-head.jpg),
    url(lazy-body.jpg),
    linear-gradient(#fff, #ccc) "
  data-bg-multi-hidpi =" url([email protected]),
    url([email protected]),
    linear-gradient(#fff, #ccc) "
>
  ...
</ div >

Фоны с `image-set` :

 < div class =" lazy " data-bg-set =" url('[email protected]') 1x, url('[email protected]') 2x " > ... </ div >

Несколько фонов с `image-set` :

 < div
  class =" lazy "
  data-bg-set ="
    url('[email protected]') 1x, url('[email protected]') 2x | 
    url('[email protected]') 1x, url('[email protected]') 2x
  "
>
  ...
</ div >

Ленивый анимированный SVG

 < object class =" lazy " type =" image/svg+xml " data-src =" lazy.svg " > </ object >

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

 < video class =" lazy " controls width =" 620 " data-src =" lazy.mp4 " data-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 " > </ iframe >

Нравится этот проект? ? Купи мне кофе!

?‍ Начало работы - Скрипт

Последняя рекомендуемая версия LazyLoad — 19.1.3 . Обратите внимание: если вам нужна поддержка Internet Explorer 11, вам необходимо использовать версию 17.9.0 или ниже.

Быстро поймите, как выполнить обновление с предыдущей версии, прочитав практическое руководство по обновлению.

Самый простой и легкий способ

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

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

ИЛИ, если вы предпочитаете импортировать его как модуль ES:

 < script type =" module " >
  import LazyLoad from "https://cdn.jsdelivr.net/npm/[email protected]/+esm" ;
</ script >

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

 var lazyLoadInstance = new LazyLoad ( {
  // Your custom settings go here
} ) ;

Чтобы быть уверенным, что DOM для вашего отложенного контента готов к моменту создания экземпляра LazyLoad, поместите тег сценария непосредственно перед закрывающим тегом </body> .

Если позже появится больше DOM, например, через вызов AJAX, вам нужно будет вызвать lazyLoadInstance.update(); чтобы LazyLoad снова проверил DOM.

 lazyLoadInstance . update ( ) ;

Использование `async` скрипта

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

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

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

 < script >
  // Set the options globally
  // to make LazyLoad self-initialize
  window . lazyLoadOptions = {
    // Your custom settings go here
  } ;
</ script >

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

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

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

Использование `async` сценария + получение ссылки на экземпляр

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

 < script >
  // Set the options globally
  // to make LazyLoad self-initialize
  window . lazyLoadOptions = {
    // Your custom settings go here
  } ;
  // Listen to the initialization event
  // and get the instance of LazyLoad
  window . addEventListener (
    "LazyLoad::Initialized" ,
    function ( event ) {
      window . lazyLoadInstance = event . detail . instance ;
    } ,
    false
  ) ;
</ script >

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

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

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

 lazyLoadInstance . update ( ) ;

ДЕМО – ИСТОЧНИК ← для одного экземпляра LazyLoad

ДЕМО – ИСТОЧНИК ← для нескольких экземпляров LazyLoad

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

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

Использование НПМ

 npm install vanilla-lazyload

Использование беседки

 bower install vanilla-lazyload

Загрузка вручную

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

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

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

 import LazyLoad from "vanilla-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.
`esm/lazyload.js`	Модуль ES	Экспортирует `LazyLoad` , поэтому вы можете импортировать его в свой проект как с помощью `<script type="module" src="...">` , так и с помощью связывателя, такого как WebPack или Rollup.

Нравится этот проект? ? Купи мне кофе!

? Рецепты

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

Скрыть альтернативный текст и пустое изображение

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

CSS

 img : not ([ src ]) : not ([ srcset ]) {
  visibility : hidden;
}

Просто так, правда.

Обработка ошибок изображения

Вариант использования : если вы хотите запретить показ несуществующих/неработающих изображений на вашем веб-сайте.

Javascript

 var myLazyLoad = new LazyLoad ( {
  // Other options here...
  callback_error : ( img ) => {
    // Use the following line only if your images have the `srcset` attribute
    img . setAttribute ( "srcset" , "[email protected] 1x, [email protected] 2x" ) ;
    img . setAttribute ( "src" , "[email protected]" ) ;
  }
} ) ;

ПРИМЕЧАНИЕ. Если ошибка возникла из-за отключения сети (навигатор временно отключен), vanilla-lazyload попытается снова загрузить изображения, когда сеть снова станет доступной.

ПРИМЕР – API

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

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

Javascript

 var myLazyLoad = new LazyLoad ( ) ;
// After your content has changed...
myLazyLoad . update ( ) ;

ДЕМО – ИСТОЧНИК – API

Смешанная нативная и отложенная загрузка на основе JS.

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

HTML

 < img class =" lazy " alt =" A lazy image " data-src =" lazy.jpg " />
< iframe class =" lazy " data-src =" lazyFrame.html " > </ iframe >
< video class =" lazy " controls data-src =" lazy.mp4 " data-poster =" lazy.jpg " > ... </ video >
< object class =" lazy " type =" image/svg+xml " data-src =" lazy.svg " > </ object >
< div class =" lazy " data-bg =" lazy.jpg " > </ div >

Javascript

 // Instance using native lazy loading
const lazyContent = new LazyLoad ( {
  use_native : true // <-- there you go
} ) ;

// Instance without native lazy loading
const lazyBackground = new LazyLoad ( {
  // DON'T PASS use_native: true HERE
} ) ;

ДЕМО – ИСТОЧНИК – API

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

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

HTML

 < div class =" scrollingPanel " >
  <!-- Set of images -->
</ div >

Javascript

 var myLazyLoad = new LazyLoad ( {
  container : document . querySelector ( ".scrollingPanel" )
} ) ;

ДЕМО – ИСТОЧНИК – API

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

HTML

 < div id =" scrollingPanel1 " class =" scrollingPanel " >
  <!-- Set of images -->
</ div >
< div id =" scrollingPanel2 " class =" scrollingPanel " >
  <!-- Set of images -->
</ div >

Javascript

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

ДЕМО – ИСТОЧНИК – API

Ленивые функции

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

HTML

 < div class =" lazy " data-lazy-function =" foo " > ... </ div >
< div class =" lazy " data-lazy-function =" bar " > ... </ div >
< div class =" lazy " data-lazy-function =" buzz " > ... </ div >
< div class =" lazy " data-lazy-function =" booya " > ... </ div >

 // It's a best practice to scope the function names inside a namespace like `lazyFunctions`.
window . lazyFunctions = {
  foo : function ( element ) {
    element . style . color = "red" ;
    console . log ( "foo" ) ;
  } ,
  bar : function ( element ) {
    element . remove ( element ) ;
    console . log ( "bar" ) ;
  } ,
  buzz : function ( element ) {
    var span = document . createElement ( "span" ) ;
    span . innerText = " - buzz!" ;
    element . appendChild ( span ) ;
    console . log ( "buzz" ) ;
  } ,
  booya : function ( element ) {
    element . classList . add ( "boo" ) ;
    console . log ( "booya" ) ;
  }
} ;

 function executeLazyFunction ( element ) {
  var lazyFunctionName = element . getAttribute ( "data-lazy-function" ) ;
  var lazyFunction = window . lazyFunctions [ lazyFunctionName ] ;
  if ( ! lazyFunction ) return ;
  lazyFunction ( element ) ;
}

var ll = new LazyLoad ( {
  unobserve_entered : true , // <- Avoid executing the function multiple times
  callback_enter : executeLazyFunction // Assigning the function defined above
} ) ;

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

Вот и все. Всякий раз, когда элемент с атрибутом data-lazy-function попадает в область просмотра, LazyLoad вызывает функцию executeLazyScript , которая получает имя функции из самого атрибута data-lazy-function и выполняет ее.

ДЕМО – ИСТОЧНИК – API

Ленивая инициализация нескольких экземпляров LazyLoad

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

HTML

 < div class =" horizContainer " >
  < img
    src =""
    alt =" Row 01, col 01 "
    data-src =" https://placeholdit.imgix.net/~text?txtsize=19&amp;txt=row_01_col_01&amp;w=200&amp;h=200 "
  />
  < img
    src =""
    alt =" Row 01, col 02 "
    data-src =" https://placeholdit.imgix.net/~text?txtsize=19&amp;txt=row_01_col_02&amp;w=200&amp;h=200 "
  />
  <!-- ... -->
</ div >
< div class =" horizContainer " >
  < img
    src =""
    alt =" Row 02, col 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 =" Row 02, col 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 = [ ] ;

var initOneLazyLoad = function ( horizContainerElement ) {
  // When the .horizContainer element enters the viewport,
  // instantiate a new LazyLoad on the horizContainerElement
  var oneLL = new LazyLoad ( {
    container : horizContainerElement
  } ) ;
  // Optionally push it in the lazyLoadInstances
  // array to keep track of the instances
  lazyLoadInstances . push ( oneLL ) ;
} ;

// The "lazyLazy" instance of lazyload is used to check
// when the .horizContainer divs enter the viewport
var lazyLazy = new LazyLoad ( {
  elements_selector : ".horizContainer" ,
  callback_enter : initOneLazyLoad ,
  unobserve_entered : true // Stop observing .horizContainer(s) after they entered
} ) ;

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

ДЕМО – ИСТОЧНИК – API

Нравится этот проект? ? Купи мне кофе!

Демо

Не нашли рецепт, который точно подойдет вашему случаю? У нас есть демо-версии!

В папке demos содержится более 30 вариантов использования vanilla-lazyload. Возможно, вы найдете там то, что ищете.

Тип	Заголовок	Код	Демо
Содержание	Простые загружаемые изображения без использования заполнителей.	Код	Жить
Содержание	Ленивые изображения, использующие встроенный SVG в качестве заполнителя.	Код	Жить
Содержание	Ленивые изображения, использующие внешний файл SVG в качестве заполнителя.	Код	Жить
Содержание	Ленивые адаптивные изображения с `srcset`	Код	Жить
Содержание	Ленивые адаптивные изображения с тегом `<picture>` и атрибутом `media` (художественное оформление)	Код	Жить
Содержание	Ленивые адаптивные изображения с `srcset` и `sizes` (с использованием `data-sizes` ).	Код	Жить
Содержание	Ленивые адаптивные изображения с `srcset` и `sizes` (с использованием простых `sizes` )	Код	Жить
Содержание	Ленивое видео с несколькими тегами `<source>` , различными вариантами предварительной загрузки, БЕЗ автозапуска	Код	Жить
Содержание	Ленивое видео с несколькими тегами `<source>` , различными вариантами предварительной загрузки, С автозапуском	Код	Жить
Содержание	Ленивая загрузка фоновых изображений	Код	Жить
Содержание	Ленивая загрузка нескольких фоновых изображений	Код	Жить
Содержание	Ленивая загрузка фоновых изображений с помощью `image-set()`	Код	Жить
Содержание	Ленивая загрузка iframe	Код	Жить
Содержание	Ленивая загрузка анимированных файлов SVG и PDF.	Код	Жить
Содержание	Ленивые изображения WebP с тегом `<picture>` и атрибутом `type` для WebP	Код	Жить
Загрузка	Асинхронная загрузка LazyLoad с помощью `<script async>`	Код	Жить
Загрузка	Асинхронная загрузка нескольких экземпляров LazyLoad с помощью `<script async>`	Код	Жить
Ошибка	Тестирование ошибки загрузки, когда `restore_on_error` имеет `false`	Код	Жить
Ошибка	Тестирование поведения ошибки загрузки, когда `restore_on_error` имеет `true`	Код	Жить
Техника	Изображения исчезают по мере их загрузки	Код	Жить
Техника	Ленивая загрузка изображений в горизонтальных слайдерах, использующих только CSS (стиль Netflix)	Код	Жить
Техника	Лениво создавайте экземпляры Swiper и лениво загружайте изображения Swiper.	Код	Жить
Техника	Ленивое выполнение функций, когда определенные элементы попадают в область просмотра.	Код	Жить
Техника	Как управлять печатью страницы с отложенными изображениями	Код	Жить
Техника	Слой всплывающего окна, содержащий ленивые изображения в контейнере с прокруткой.	Код	Жить
Настройки	Несколько контейнеров прокрутки	Код	Жить
Настройки	Одиночный контейнер прокрутки	Код	Жить
Методы	Как `restore()` DOM в исходное состояние и/или `destroy()` LazyLoad	Код	Жить
Методы	Добавление динамического контента, затем `update()` LazyLoad	Код	Жить
Методы	Добавление динамического контента, затем `update()` LazyLoad, передавая NodeSet элементов.	Код	Жить
Методы	Загружайте пунктуальные изображения с помощью метода `load()`	Код	Жить
Методы	Загрузите все изображения одновременно, используя `loadAll()`	Код	Жить
Тест	Проверка нескольких порогов	Код	Жить
Тест	Тестирование поведения со скрытыми изображениями	Код	Жить
Тест	Тестовая производительность, ленивая загрузка сотен изображений	Код	Жить
Родной	Протестируйте встроенную отложенную загрузку изображений БЕЗ какой-либо строки javascript, даже этого скрипта.	Код	Жить
Родной	Протестируйте нативную отложенную загрузку изображений при условии, используя опцию `use_native` (см. API).	Код	Жить

Нравится этот проект? ? Купи мне кофе!

? Советы и рекомендации

Расширять

vanilla lazyload

?‍ Начало работы – HTML

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

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

Ленивое адаптивное изображение с srcset и sizes :

Ленивое адаптивное изображение с поддержкой высокого разрешения с использованием тега picture :

Ленивое адаптивное изображение с автоматическим выбором формата WebP с использованием тега picture :

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

Одно фоновое изображение:

Одиночный фон с поддержкой экрана HiDPI:

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

Несколько фонов, поддержка экрана HiDPI:

Фоны с image-set :

Несколько фонов с image-set :

Ленивый анимированный SVG

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

Ленивый iframe

?‍ Начало работы - Скрипт

Самый простой и легкий способ

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

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

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

Использование НПМ

Использование беседки

Загрузка вручную

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

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

Пакеты

? Рецепты

Скрыть альтернативный текст и пустое изображение

Обработка ошибок изображения

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

Смешанная нативная и отложенная загрузка на основе JS.

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

Ленивые функции

Ленивая инициализация нескольких экземпляров LazyLoad

Демо

? Советы и рекомендации

Ленивое адаптивное изображение с `srcset` и `sizes` :

Ленивое адаптивное изображение с поддержкой высокого разрешения с использованием тега `picture` :

Ленивое адаптивное изображение с автоматическим выбором формата WebP с использованием тега `picture` :

Фоны с `image-set` :

Несколько фонов с `image-set` :

Использование `async` скрипта

Использование `async` сценария + получение ссылки на экземпляр