JSLazyLoading — это плагин для отложенной загрузки и мультивывода изображений (lazy load), предназначенный для оптимизации клиентской производительности. Плагин работает на чистом JavaScript и не зависит от внешних библиотек, таких как jQuery. Принцип отложенной загрузки заключается в том, что при отрисовке страницы загружаются только те изображения, которые находятся в области видимости браузера. Изображения не загружаются до тех пор, пока пользователь не пролистает страницу до места их видимого нахождения в документе.

С помощью опции мультивывода вы можете динамически выводить Retina изображения или, наоборот, выводить уменьшенные, облегчённые изображения для мобильных устройств. Режим Retina позволяет загружать «тяжёлые» изображения по мере необходимости, при этом скорость загрузки страницы не будет зависеть от готовности загрузки изображений. Это может значительно ускорить работу вашего сайта, особенно при медленном интернет-соединении, и сделать удобной загрузку изображений высокого качества на экранах Retina. Если же вам необходимо максимальное ускорение, то плагин может работать в другом режиме, при котором пользователю мобильных устройств будут выводиться уменьшенные, «облегчённые» аналоги изображений. Плагин поддерживается большинством современных и старых браузеров, совместим с AJAX навигацией.

Открыть демо страницу
Загрузить этот плагин в формате zip

Установка и использование плагина JSLazyLoading для web

<head>

  <!-- Подключите скрипт плагина в секции head вашего сайта -->
  <script type="text/javascript" src="/jslazyloading/jslazyloading.min.js"></script>

  <!-- Запуск плагина -->
  <script type="text/javascript">

  /* Если требуется, установите рабочие параметры. По желанию вы можете выборочно перегрузить настройки по умолчанию вашими настройками, например: */
    
  var params = {
      docReady: true,
      dataAttribute: "data-src",
      multiServing: "apache",
      multiServingType: "density",
      multiServingBreakpoints: {
          "_retina2x": "192dpi",
          "_retina3x": "288dpi"
      },
      sequentialLoading: null,
      backgroundColor: "#ededed",
      fadeInEffect: true,
      fadeInDuration: 400,
      fadeInPreserveOpacity: true,
      softMode: false,
      ajaxListener: false,
      limit: 0,
      rectangularScope: false,
      rangeY: 0,
      rangeX: 0
  };

    /* 
    * Создайте новый экземпляр объекта. Конструктор может принимать два необязательных аргумента: 
    * - рабочие параметры в виде объекта, 
    * - директория плагина в виде строки (по умолчанию определяется автоматически).
    */
    var jsLazy = new JSLazyLoading (params);

  </script>
</head>


<!-- Переименуйте аттрибут изображения “src” в data-* аттрибут “data-src” -->
<img data-src="/example.jpg" width="400" height="200" alt="" />

Описание рабочих параметров плагина

docReady (boolean)
Использовать или нет встроенную функцию docReady, чтобы запустить плагин в момент завершения загрузки DOM (true, установлено по умолчанию). Если установлено значение false, плагин запустится немедленно, как только был создан экземпляр объекта.
dataAttribute (string)
Имя data-* аттрибута, содержащего ссылку на оригинальное изображение. Значение по умолчанию — "data-src".
sequentialLoading (null, integer)
Последовательная принудительная загрузка (значение по умолчанию — null, отключено). Опция позволяет загружать изображения, которые находятся за пределами области видимости, через интервал. Пока посетитель просматривает страницу, изображения могут загружаться с интервалом, установленным в значении данного параметра (количество миллисекунд, integer). Вы можете установить также нулевое значение — в данном случае все изображения загрузятся немедленно, друг за другом.
placeholder (string)
В соответствии с HTML стандартами, изображение должно иметь обязательный аттрибут “src”. В режиме отложенной загрузки данный аттрибут должен содержать изображение-заглушку. Данный параметр определяет путь к файлу изображения-заглушки или строку данного изображения в формате base64 (по умолчанию устанавливается автоматически).
loaderImage (null, string)
Путь к файлу изображения-загрузчика (loader), которое будет показано во время загрузки оригинального изображения (по умолчанию устанавливается автоматически). Чтобы отключить изображение-загрузчик, установите null в качестве значения.
backgroundColor (null, string)
Цвет фона изображения-заглушки на время загрузки оригинального изображения (null — прозрачный фон, установлено по умолчанию). Чтобы изменить фон, установите цвет в качестве значения, например "#000".
fadeInEffect (boolean, string)

Появление изображения путём плавного изменения его прозрачности. Вы можете установить значения true (установлено по умолчанию) и false, чтобы включить/выключить данный эффект на всех устройствах, а также строку со значением "desktop", чтобы включить его только для настольных браузеров.

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

fadeInDuration (integer)
Длительность эффекта плавного возникновения в миллисекундах (значение по умолчанию — 400).
fadeInPreserveOpacity (boolean)
Параметр эффекта плавного возникновения: сохранить или не сохранять оригинальную прозрачность изображений. Если установлено значение false, то в момент загрузки изображения для свойства “opacity” будет установлено максимальное значение, т.е. 1 (работает быстрее). Если установлено значение true (установлено по умолчанию), то для свойства “opacity” будет установлено значение, коррелирующееся с правилами ваших стилей CSS. Если на вашем сайте отсутствуют прозрачные (полупрозрачные) изображения, то для улучшения производительности на стороне клиента рекомендуется отключить данную опцию.
softMode (boolean)

Параметр включает или отключает мягкий режим загрузки изображений (отключён по умолчанию). Так как изображение при отложенной загрузке не содержит оригинальную ссылку в аттрибуте “src”, браузеру посетителя не известны ширина и высота данного изображения. В результате, содержимое страницы может “прыгать” во время загрузки изображения, так как браузер меняет изображение-заглушку на оригинальное изображение. Чтобы предотвратить данный эффект, вы можете указать в стилях CSS высоту изображения, однако это может быть затруднительно в некоторых случаях, например при адаптивном, «резиновом» макете сайта.

С помощью плавного режима загрузки вам не обязательно устанавливать в стилях высоту ваших изображений — она будет установлена динамически, в соответствии с шириной контейнера. Мягкий режим загрузки доступен только для изображений с установленными аттрибутами “width” и “height” (плагин вычисляет размеры изображения согласно значениям данных аттрибутов).

ajaxListener (boolean)
Перезагрузка плагина при событии AJAX, при котором браузер посылает запрос HTTP. (false — отключено, установлено по умолчанию). Назначение данной опции заключается в необходимости включить новые изображения в рабочую коллекцию плагина для их отложенной загрузки (будут вовлечены только изображения с установленными data-* аттрибутами). Для разработчиков: альтернативный путь включения новых изображений в рабочую коллекцию плагина — использование public метода “refresh” (см. раздел ниже).
limit (integer)
Изменяя этот параметр, вы влияете на количество изображений, проверяемых в цикле. Значение по умолчанию (0), означает, что только одно изображение проверяется за одну операцию. Как только это изображение оказывается в области видимости, плагин его загружает и переходит к следующему изображению. Чем меньше значение данного параметра, тем лучше производительность, однако если ваш сайт имеет сложную раскладку, то изображения могут не загружаться. В этом случае увеличьте значение данного параметра до числа, при котором сбой в загрузке не будет выявляться или установите большое значение (например, 1000), если вам нужно убрать предел итераций.
rectangularScope (boolean)

Данный параметр определяет геометрию области видимости. Если установлено значение true, то данная область будет иметь прямоугольные границы, следовательно, при загрузке изображений учитывается верхняя, нижняя, левая и правая границы видимой области окна — в данном случае изображения загружается только при условии, если они находятся в прямоугольной области видимости. Если установлено значение false, изображения загружаются сразу, как только они оказываются выше нижней границы видимой области окна.

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

rangeY (integer)
Если вы хотите, чтобы изображения загружались раньше того момента, как они окажутся в области видимости, используйте данный параметр. Например, установка значения 300 означает, что изображения будут загружаться на 300 пикселей раньше, чем они окажутся в области видимости.
rangeX (integer)
Порог оси X доступен в случае, если параметр “rectangularScope” установлен как true.
multiServing (boolean, string)
Данная опция включает/отключает мультивывод изображений и задаёт его режим. Допустимые значения: false (отключено), "manual", "php", "apache" (см примеры ниже).
multiServingType (string)
Тип мультивывода: по ширине экрана или по плотности экрана (работает при условии, если опция “multiServing” включена). Допустимые значения: "width", "density". В первом случае мультивывод происходит в зависимости от ширины экрана. Во втором случае — в зависимости от плотности экрана.
multiServeBreakpoints (object)
Контрольные точки мультивывода изображений (работает при условии, если опция “multiServing” включена). См примеры ниже.

Мультивывод изображений

Мультивывод изображений — это их динамическая подмена, которая определяется типом устройства пользователя. Доступно два способа мультивывода: в первом случае сервер отдаёт пользователю Retina изображения, но только при условии, если плотность его экрана больше или равна значению, установленному в настройках плагина в качестве контрольной точки. При втором способе плагин выводит уменьшенные аналоги изображений, если ширина экрана пользователя меньше или равна значению контрольной точки. Контрольных точек может быть несколько — в этом случае плагин выведет изображение, кореллирующееся с ближайшей контрольной точкой. Плагин осуществляет мультивывод вручную или автоматически. Ручной метод требует установки HTML аттрибутов изображений, в которых будут содержаться ссылки на изображения-аналоги. Автоматический метод выводит изображения только в том случае, если они существуют: сервер проверяет наличие изображений-аналогов по постфиксу файла, при этом исходный HTML изменять не нужно. При автоматическом режиме изображения-аналоги должны быть расположены в той же директории, что и оригинальные изображения.
Ручной режим
<!-- В ручном режиме вам необходимо установить один или несколько дополнительных data-* аттрибутов с сылками на изображения-аналоги, например: -->

<img src="/example.jpg" data-src-small="/example-small.jpg" data-src-retina2x="/example-retina2x.jpg" />
Автоматический режим
<!-- В автоматическом режиме вам не нужно устанавливать HTML аттрибуты — просто скопируйте изображение, уменьшите или измените его, добавьте к имени файла постфикс и поместите копию в ту же директорию, где находится оригинальное изображение. Постфикс файлов должен начинаться с символа (_) подчёркивания. Если изображений-аналогов не существует, плагин выведет оригинальное изображение. Ваш HTML в автоматическом режиме ничем не отличается исходного: -->

<img src="/files/image.jpg" />

файлы/
  [..]
  image.jpg
  image_small.jpg
  image_medium.jpg
  image_retina2x.jpg
Обработчики изображений
Доступно два типа обработчика: обработчик Apache и обработчик PHP. Для пользователей Apache рекомендуется установить обработчик Apache: он работает быстрее обработчика PHP и не изменяет расширение файла – вывод изображений осуществляется при помощи внутренних перенаправлений сервера, поэтому время отклика сервера сводится к минимуму. Если вы не используете Apache или mod_rewrite, или же если при использовании обработчика Apache возникают ошибки, установите обработчик PHP.
Примеры использования мультивывода изображений в различных режимах
    // Контрольные точки для ручного режима мультивывода по ширине экрана
    var params = {
        multiServing: "manual",
        multiType: "width",
        multiServingBreakpoints: {
            "data-src-small": "420px",    
            "data-src-medium": "768px"
        }
    };
    
    // Контрольные точки для ручного режима мультивывода по плотности экрана
    var params = {
        multiServing: "manual",
        multiType: "density",
        multiServingBreakpoints: {
            "data-retina2x": "192dpi",    
            "data-retina3x": "288dpi"
        }
    };
    
    // Контрольные точки для автоматического режима (обработчик Apache) мультивывода по ширине экрана
    var params = {
        multiServing: "apache",
        multiType: "width",
        multiServingBreakpoints: {
            "_small": "420px",    
            "_medium": "768px"
        }
    };
    
    // Контрольные точки для автоматического режима (обработчик PHP) мультивывода по плотности экрана
    var params = {
        multiServing: "php",
        multiType: "density",
        multiServingBreakpoints: {
            "_retina2x": "192dpi",    
            "_retina3x": "288dpi"
        }
    };

Public методы

/* Используйте метод “refresh”, если вам нужно включить новые изображения из AJAX ответа в рабочую коллекцию плагина. В данном случае не нужно создавать новый экземпляр объекта */

var jsLazy = new JSLazyLoading();

// Ваш код...

var request = new XMLHttpRequest();
request.open("GET", "/example.html", "true");

request.onreadystatechange = function(){
	
   if(request.readyState == 4)
   {
	
      // Ваш код...

      if(typeof jsLazy !== "undefined")
      {
        jsLazy.refresh();
      }
	  
   }
   
}

request.send(null);

/* Метод “abort” является экстренным способом остановки плагина, при этом все оригинальные изображения немедленно загрузятся, а прослушиватели событий будут удалены. */

var jsLazy = new JSLazyLoading();

// Определённые условия...

jsLazy.abort();

/* Используйте метод “start”, если вам нужно запустить плагин снова после его остановки, не прибегая к созданию нового экземпляра объекта, если на странице появились новые изображения. */
jsLazy.start();