Layzr.js - плагин для осуществления отложенной загрузки изображений

Отложенная загрузка позволит вашим страницам загружаться быстрее, за счёт подгрузки изображений только в тот момент, когда они попадают в область обзора.

Установка

Скачайте скрипт с GitHub и разместите подключение на своих страницах.

<script src="layzr.js"></script>

Настройка изображений

Для каждого элемента img и/или iframe, которые должны загрузится отложенно, укажите атрибуты src и data-layzr.

<img data-layzr="image/source">
<iframe data-layzr="media/source"></iframe>

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

Поддержка Retina-дисплеев

Для поддержки retina-дисплеев (с высоким разрешением) можно указать специальное изображение в специальном атрибуте data-layzr-retina. Данный ресурс будет загружен, если devicePixelRatio больше 1.

<img data-layzr="image/source" data-layzr-retina="optional/retina/source">

Фоновые изображения

Воспользуйтесь атрибутом data-layzr-bg для загрузки изображений, которые должны служить фоном.

Атрибут data-layzr-bg - это флаг. Изображение будет браться из атрибутов data-layzr и data-layzr-retina.

<img data-layzr="image/source" data-layzr-bg>

Скрытые изображения

Атрибут-флаг data-layzr-hidden для указания, что изображение вовсе не должно быть загружено.

<img data-layzr="image/source" data-layzr-hidden>

Инициализация плагина

Для инициализации плагина достаточно создать его объект!

var layzr = new Layzr();

Далее советуем ознакомиться со списком настроек:

Настройки

Ниже вы можете увидеть список настроек плагина их параметров:

var layzr = new Layzr({
  selector: '[data-layzr]',
  attr: 'data-layzr',
  retinaAttr: 'data-layzr-retina',
  bgAttr: 'data-layzr-bg',
  hiddenAttr: 'data-layzr-hidden',
  threshold: 0,
  callback: null
});

selector

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

var layzr = new Layzr({
  selector: '[data-layzr]'
});

attr / retinaAttr

Атрибуты с которых будет извлечена ссылка на изображение.

var layzr = new Layzr({
  attr: 'data-layzr',
  retinaAttr: 'data-layzr-retina'
});

bgAttr

Название атрибута для указания, что изображение является фоновым.

var layzr = new Layzr({
  bgAttr: 'data-layzr-bg'
});

hiddenAttr

Название атрибута для указания, что изображение не должно загружаться.

var layzr = new Layzr({
  hiddenAttr: 'data-layzr-hidden'
});

threshold

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

Данная настройка идентична свойству vh в CSS.

var layzr = new Layzr({
  threshold: 50
});

callback

Функция обратного вызова, которая вызывается, когда изображение будет загружено.

// "this" относится к объекту изображения

var layzr = new Layzr({
  callback: function() {
    this.classList.add('class');
  }
});

Браузерная поддержка

Если говорить о IE, Layzr поддерживается, начиная с IE10+.

Для работы в более ранних версиях воспользуйтесь полифилом Paul Irish для requestAnimationFrame.