Lozad.js:

Установить

$ npm install --save lozad

# Альтернативно вы можете использовать Yarn

$ yarn add lozad

# Другой вариант — использовать Bower

$ bower install lozad

Затем с помощью модуля bundler, такого как rollup или webpack, используйте, как и все остальное:

// использование модулей ES6

import lozad from 'lozad'

// использование модулей CommonJS

var lozad = require('lozad')

Или загрузить через CDNи включить в headтег вашей страницы.

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js"></script>

При загрузке с CDN вы можете найти библиотеку вкл window.lozad.

Применение

В HTML добавьте идентификатор к элементу (идентифицированный селектор по умолчанию — lozadclass):

<img class="lozad" data-src="image.png">

Все, что вам нужно сделать сейчас, это просто создать экземпляр Lozad следующим образом:

const observer = lozad(); // lazy loads elements with default selector as '.lozad'
observer.observe();или с помощью ссылки на элемент DOM:const el = document.querySelector('img');
const observer = lozad(el); // passing a `NodeList` (e.g. `document.querySelectorAll()`) is also valid
observer.observe();

или с пользовательскими опциями:

const observer = lozad('.lozad', {

    rootMargin: '10px 0px', // syntax similar to that of CSS Margin

    threshold: 0.1, // ratio of element convergence

   enableAutoReload: true // it will reload the new image when validating attributes changes

});

observer.observe();

Ссылка:

— Параметры IntersectionObserver: rootMargin.

— Параметры IntersectionObserver: пороговые значения.

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

lozad('.lozad', {
  load: function(el) {
        console.log('loading element');
// Пользовательская реализация для загрузки элемента
// e.g. el.src = el.getAttribute('data-src');
  }
});Если вы хотите расширить загруженное состояние элементов, вы можете добавить опцию «загружено»:
Примечание. Атрибут "data-loaded"="true" используется lozad для определения того, был ли ранее загружен элемент.lozad('.lozad', {
loaded: function(el) {
// Пользовательская реализация для загруженного элемента
        el.classList.add('loaded');
    }
});

Если вы хотите отложенно загружать динамически добавляемые элементы:

const observer = lozad();
observer.observe();
// ... code to dynamically add elements
observer.observe(); // observes newly added elements as wellдля использования с адаптивными изображениями<!-- responsive image example -->
<img class="lozad" data-src="image.png" data-srcset="image.png 1000w, image-2x.png 2000w">

для использования с фоновыми изображениями

<!-- background image example -->
<div class="lozad" data-background-image="image.png">
</div>

для использования с несколькими фоновыми изображениями

<!-- multiple background image example -->
<div class="lozad" data-background-image="path/to/first/image,path/to/second/image,path/to/third/image">
</div>

для использования с адаптивными фоновыми изображениями (image-set)

<!-- responsive background image-set example -->
<div class="lozad" data-background-image-set="url('photo.jpg') 1x, url('photo@2x.jpg') 2x">
</div>

Чтобы изменить разделитель, разделяющий фоновые изображения:

<!-- custom delimiter for background images example -->
<div
  class="lozad"
  data-background-image="/first/custom,image,path/image.png-/second/custom,image,path/image.png"
  data-background-delimiter="-"
>
</div>

Если вы хотите загрузить изображения до их появления:const observer = lozad();

observer.observe();
const coolImage = document.querySelector('.image-to-load-first');
// ... trigger the load of a image before it appears on the viewport
observer.triggerLoad(coolImage);

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

<img class="lozad" data-placeholder-background="red" data-src="image.png">

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

Пример с тегом изображения
Создайте структуру элемента сломанного изображения.
Браузер IE не поддерживает тег изображения! Вам необходимо установить data-iesrcattribute (только для ваших тегов изображений) с источником для браузера IE.
data-altattribute можно добавить к тегу изображения для использования в altattribute лениво загружаемых изображений.

<!-- For an element to be caught, add a block type that is different from the inline and some min-height for correct caught into view -->
<picture class="lozad" style="display: block; min-height: 1rem" data-iesrc="images/thumbs/04.jpg" data-alt="">
    <source srcset="images/thumbs/04.jpg" media="(min-width: 1280px)">
    <source srcset="images/thumbs/05.jpg" media="(min-width: 980px)">
    <source srcset="images/thumbs/06.jpg" media="(min-width: 320px)">
    <!-- NO img element -->
    <!-- instead of img element, there will be the last source with the minimum dimensions -->
    <!-- for disabled JS you can set <noscript><img src="images/thumbs/04.jpg" alt=""></noscript> -->
</picture>

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

<picture class="lozad" style="display: block; min-height: 1rem" data-iesrc="images/thumbs/04.jpg" data-alt="">
<source srcset="images/thumbs/04.jpg" media="(min-width: 1280px)">
    <source srcset="images/thumbs/05.jpg" media="(min-width: 980px)">
    <source srcset="images/thumbs/06.jpg" media="(min-width: 320px)">
    <!-- you can define a low quality image placeholder that will be removed when the picture is loaded -->
    <img src="data:image/jpeg;base64,/some_lqip_in_base_64==">
</picture>Пример с видео<video class="lozad" data-poster="images/backgrounds/video-poster.jpeg">
    <source data-src="video/mov_bbb.mp4" type="video/mp4">
    <source data-src="video/mov_bbb.ogg" type="video/ogg">
</video>Пример с iframe<iframe data-src="embed.html" class="lozad"></iframe>

Вот и все, просто добавьте lozadкласс.

Пример класса переключения

<div data-toggle-class="active" class="lozad">
    <!-- content -->
</div>

active Класс будет переключен на элемент, когда он войдет в окно просмотра браузера.

JavaScript / jQuery