Lozad.js

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

Lozad.js:

• эффективно загружает элементы с помощью чистого JavaScript;
• представляет собой легковесную библиотеку, размер которой составляет всего 5 КБ после минификации и сжатия;
• не имеет зависимостей;
• позволяет лениво загружать динамически добавляемые элементы;
• поддерживает <img>, <picture>, iframes, видео, аудио, адаптивные изображения, фоновые изображения и множественные фоновые изображения и т. д.;
• даже поддерживает LQIP (Low Quality Image Placeholder);
• полностью бесплатен и открыт. Он будет перезагружен при изменении допустимых атрибутов.

Написан с целью ленивой загрузки изображений, фреймов, рекламы, видео или любого другого элемента с использованием недавно добавленного API Intersection Observer и MutationObserver с огромными преимуществами в производительности.

Упоминание в:

— Web | Google Developers;
— Product Hunt;
— Reddit;
— CSS Tricks;
— David Walsh;
— Codrops;
— SitePoint.

Бренды, использующие Lozad.js:

Tesla, Binance, Domino's, BNP Paribas, Mi, Amway, TATA, Verizon, Atlassian, BNP Paribas, JLM Couture, New Balance, BBC и многие другие.

Содержание

1. Демо.
2. Предыстория.
3. Установка.
4. Использование.
5. Пример с тегом picture.
6. Поддержка браузерами.
7. Часто задаваемые вопросы.
8. Вклад.
9. Журнал изменений.
10. Лицензия.

Ещё одна библиотека для ленивой загрузки JavaScript, зачем?

Существующие библиотеки для ленивой загрузки подключаются к событию прокрутки или используют периодический таймер и вызывают getBoundingClientRect() для элементов, которые необходимо загрузить лениво. Этот подход, однако, мучительно медленный, поскольку каждый вызов getBoundingClientRect() заставляет браузер повторно компоновать всю страницу и внесёт значительный скачок на ваш сайт.

Повышение эффективности и производительности — вот для чего предназначен IntersectionObserver, и он появился в Chrome 51. IntersectionObservers сообщают вам, когда наблюдаемый элемент входит или выходит из области просмотра. Установка

# Вы можете установить lozad с помощью npm
$ npm install --save lozad

# Также вы можете использовать Yarn
$ yarn add lozad

# Ещё один вариант — использовать Bower
$ bower install lozad

Затем с помощью сборщика модулей, такого как 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 добавьте идентификатор к элементу (по умолчанию селектор идентифицируется как класс lozad):

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

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

const observer = lozad(); // лениво загружает элементы с селектором по умолчанию как '.lozad'
observer.observe();

или с DOM Element ссылкой:

const el = document.querySelector('img');
const observer = lozad(el); // передача `NodeList` (например, `document.querySelectorAll()`) также действительна
observer.observe();

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

const observer = lozad('.lozad', {
    rootMargin: '10px 0px', // синтаксис похож на CSS Margin
    threshold: 0.1, // соотношение сходимости элемента
    enableAutoReload: true // он перезагрузит новое изображение при проверке изменений атрибутов
});
observer.observe();

Ссылка:

• IntersectionObserver options: rootMargin
• IntersectionObserver options: thresholds

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

lozad('.lozad', {
    load: function(el) {
        console.log('loading element');

        // Пользовательская реализация для загрузки элемента
        // например, el.src = el.getAttribute('data-src');
    }
});

Если вы хотите расширить состояние «загружено» элементов, вы можете добавить опцию «loaded»:

Примечание: атрибут "data-loaded"="true" используется lozad для определения того, был ли элемент ранее загружен.

lozad('.lozad', {
    loaded: function(el) {
        // Пользовательская реализация на загруженном элементе
        el.classList.add('loaded');
    }
});

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

const observer = lozad();
observer.observe();

// ... код для динамического добавления элементов
observer.observe(); // также наблюдает за вновь добавленными элементами

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

<!-- пример адаптивного изображения -->
<img class="lozad" data-src="image.png" data-srcset="image.png 1000w, image-2x.png 2000w">

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

<!-- пример фонового изображения -->
<div class="lozad" data-background-image="image.png">
</div>

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

<!-- пример нескольких фоновых изображений -->
<div class="lozad" data-background-image="path/to/first/image,path/to/second/image,path/to/third/image">
</div>

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

<!-- пример набора адаптивных фоновых изображений -->
<div class="lozad" data-background-image-set="url('photo.jpg') 1x, url('photo@2x.jpg') 2x">
</div>

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

<!-- пользовательский разделитель для фоновых изображений -->
<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');
// ... инициировать загрузку изображения перед его появлением на экране
observer.triggerLoad(coolImage);