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

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

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

Открыть демо страницу
Приобрести этот плагин
Посмотреть журнал изменений

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

  1. Установите плагин при помощи менеджера расширений Joomla.
  2. Откройте страницу настроек плагина.
  3. Выберите необходимые опции и включите плагин.

Настройки на стороне сервера

Стандартные режим: плагин модифицирует вывод HTML «на лету», изменяя аттрибут изображения “src” на временный аттрибут “data-src”. Таким образом, вам не нужно редактировать исходный HTML. 

<!-- Стандартный режим позволяет вам держать ваш HTML без изменений: -->

<img src="/example-1.jpg" alt="" />

<!-- Изображение в вышеуказанном примере будет вовлечено в отложенную загрузку. Ваш исходный HTML останется без изменений, при этом плагин отредактирует вывод HTML, который изменится следующим образом: -->

<img data-src="/example-1.jpg" src="data:image/png;base64..." alt="" />

Реверсивный режим: плагин игнорирует изображения с аттрибутом “src” и включает в режим отложенной загрузки только изображения с аттрибутом “data-src”, который вам необходимо установить для изображений самостоятельно в исходный HTML. В реверсивном режиме, плагин не изменяет вывод HTML. 

<!-- Это изображение будет проигнорировано плагином и выведено обычным способом: -->

<img src="/example-2.jpg" />

<!-- А это изображение будет вовлечено в отложенную загрузку: -->

<img data-src="/example-2.jpg" />
Глобальные исключения

Исключения компонентов, их представлений и отдельных материалов из отложенной загрузки. Если введённые параметры совпадут с глобальными переменными Joomla!, изображения будут выводиться в обычном режиме. Если режим перезаписи установлен в реверсивное значение, то аттрибуты изображений “data-src” будут переписаны на аттрибуты “src”. Параметры разделяются знаком амперсанд (&), значения параметров определяются знаком равно (=), группы параметров и их значений разделяются между собой запятыми. В качестве значений параметров допустимо использовать маски типа (x|y|z). Примеры:

Исключение модальных окон: tmpl=component
Исключение редактора во фронт-энде: view=form
Исключение пунктов меню: Itemid=(13|25|77)
Исключение компонента полностью: option=com_users

Исключение представлений компонента: option=com_content&view=category, option=com_content&view=category&layout=blog
Исключение отдельных материалов: option=com_content&view=article&id=(10|101|3)

Добавить/исключить критерии
Если выбрано «Исключить», то изображения исключаются из отложенной загрузки по классам CSS, при условии если CSS классы указаны в качестве значений соответствующего поля. Если выбрано «Добавить», то отложенная загрузка будет включена лишь при условии, если изображения находятся на указанных страницах либо соотносятся с указанными компонентами или представлениями компонентов, а также если изображения имеют указанные классы CSS. Параметры указываются по аналогии с глобальными исключениями. Конфликт указанной области применения с глобальными исключениями разрешается в пользу глобальных исключений.
Использование в админке
Если опция включена, плагин будет работать в панели администратора. Рекомендуется использовать эту опцию только совместно с настройкай «Исключить/Добавить критерии» с выбранным параметром «Добавить», чтобы плагин работал только в определённых компонентах или с изображениями, имеющими определённые CSS классы. В противном случае это может нарушить работу панели администратора.
Добавить/исключить изображения по CSS
Исключить/включить в отложенную загрузку изображения, имеющие определённые классы CSS. Перечень CSS классов указывается через запятую. Не рекомендуется вводить более 5 классов, так как это может повлиять на производительность.
Исключающие HTML теги

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

<!-- Все изображения внутри данного блока будут исключены из отложенной загрузки -->

<!--[NOLAZY]-->

  <div>
  
    <img src="/image-1.jpg" />
    <img src="/image-2.jpg" />
	
  </div>
  
  <div>
  
    <img src="/image-3.jpg" />
    <img src="/image-4.jpg" />
	
  </div>
  
<!--[ENDNOLAZY]-->


<!-- Другой пример. Все изображения внутри следующих произвольных тегов будут исключены: -->
    
<no-lazy>

    <img src="/image-5.jpg" />
    <img src="/image-6.jpg" />
	
</no-lazy>
Поддержка фоновых изображений
Данная опция определяет, следует ли загружать фоновые изображения в режиме отложенной загрузки. Если включено, фоновые изображения загружаются отложенно в глобальном режиме. Эффект плавного возникновения, загрузчик и другие опции, специфичные для обычных изображений, не доступны для фоновых изображений.
Noscript поддержка

Если данная опция включена, то каждое изображение перед модификацией будет клонировано и обёрнуто в тег <noscript>, для того чтобы данные изображения были доступны пользователям с отключённым JavaScript. Необходимо также скрыть пустые изображения-заглушки, так как они занимают место на странице. Поэтому динамически создаётся стиль CSS, который также помещается в теги <noscript>, — он доступен лишь в том случае, если JavaScript выключен. 

<head>
  
<!-- Если JavaScript выключен, пустые изображения будут скрыты: -->
  
  <noscript class="jsll-noscript">
    <style type="text/css">.jsll-noscript + img {display: none}</style>
  </noscript>
  
</head>

<!-- Ваш HTML: -->

<img src="/image-1.jpg" />
<img src="/image-2.jpg" />


<!-- Оригинальные изображения перед модификацией будут клонированы и обёрнуты в контейнер <noscript>. Вывод приведённого в примере выше HTML изменится следующим образом: -->

<noscript class="jsll-noscript">
  <img src="/image-1.jpg" />
</noscript>

<img data-src="/image-1.jpg" src="/transparent-placeholder.gif" />

<noscript class="jsll-noscript">
  <img src="/image-2.jpg" />
</noscript>

<img data-src="/image-2.jpg" src="/transparent-placeholder.gif" />
Изображение-заглушка

В соответствии с HTML стандартами, изображение должно иметь обязательный аттрибут “src”. В режиме отложенной загрузки данный аттрибут должен содержать изображение-заглушку. Вы можете указать изображение-заглушку самостоятельно для каждого вашего изображения, вовлечённого в отложенную загрузку, или же позволить плагину сделать эту работу автоматически. В момент, когда изображение-заглушка находится в области видимости, плагин меняет её на оригинальное изображение, ссылка на которое указана во временном аттрибуте “data-src”. Данная опция предназначена только для реверсивного режима. В стандартном режиме изображение-заглушка всегда устанавливается автоматически. 

<!-- Если вы используете реверсивный режим, ваш HTML должен быть подобен следующему примеру: -->
 
<img data-src="/example.jpg" />


<!-- Если опция “Изображение-заглушка” включена, Вывод приведённого в примере выше HTML изменится следующим образом: -->
 
<img src="/transparent-placeholder.gif" data-src="/example.jpg" />


<!-- Вывод HTML при отключенной опции: -->
 
<img data-src="/example.jpg" />
SEO оптимизация

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

Чтобы распознать бота, мы можем проверить его User-Agent, и остановить плагин, если в нём содержатся определённые подстроки, которые вы можете указать в соответствующем поле. В реверсивном режиме плагин работает по-другому: вместо изображения-заглушки поисковой системе показывается оригинальное изображение. Будьте внимательны со вводом значений в данное поле: вы можете так же отключить плагин от обычных браузеров, например если введёте что-нибудь вроде “chrome”.

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

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

Мультивывод изображений — это их динамическая подмена, которая определяется типом устройства пользователя. Доступно два способа мультивывода: в первом случае сервер отдаёт пользователю 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.

Настройки на стороне клиента

Динамический режим

При включённом динамическом режиме изображения, скрытые при помощи CSS не загружаются до момента изменения их статуса видимости. В динамическом режиме фильтруются изображения, имеющие свойство “display:none” или “visibility:hidden” и изображения, выходящие за пределы области видимости по оси Х, которые могут быть скрыты при помощи свойства “overflow” (например, слайдеры и карусели). Если динамический режим выключен, скрытые изображения загружаются сразу после загрузки страницы независимо от их местонахождения.

Включение динамического режима запускает отдельный прослушиватель, который с интервалом 3 раза в секунду проверяет статус скрытых изображений независимо от событий “scroll” и “resize”, запускающих проверку видимых изображений. В дополнение к этому параметру вы также можете установить отступ по оси X, при котором изображения будут загружаться раньше достижения боковых границ области видимости.

Верхняя граница
Использовать ли верхнюю границу экрана для проверки видимости изображений? Если да, то изображения не будут загружаться, если они находятся выше верхней границы экрана. По умолчанию используется только нижняя граница экрана.
Граница видимости (ось Y)
Если вы хотите, чтобы изображения загружались раньше того момента, как они окажутся в области видимости по оси Y, используйте данный параметр. Например, установка значения 300 означает, что изображения будут загружаться на 300 пикселей раньше, чем достигнут нижней границы видимости. Если включена опция “Верхняя граница”, то данный параметр определяет также отступ от верхней границы.
Граница видимости (ось X)
Данная опция определяет боковые границы видимости. Порог оси X доступен при условии, если опция “Динамический режим” включена.
Плавное возникновение
Появление изображения путём плавного изменения его прозрачности. Эффект плавного возникновения основан на CSS3 переходах и доступен только для браузеров, поддерживающих CSS3. Основной целью отложенной загрузки изображений является улучшение производительности, поэтому нецелесообразно реализовывать данный эффект при помощи ресурсоёмких рекурсий или интервальных циклов. В связи с этим плавное возникновение изображений не доступно для устаревших браузеров. Вы можете включить данный эффект для всех устроиств или только для настольных браузеров.
Длительность анимации
Данный параметр связан с опцией эффекта плавного возникновения и устанавливает количество миллисекунд, определяющее длительность анимации.
Изображение-загрузчик
Показывать/не показывать изображение-загрузчик (loader) во время загрузки оригинального изображения. Если вы не хотите использовать изображение-загрузчик, используемое по умолчанию, вы можете установить альтернативное изображение.
Цвет фона изображения-заглушки
Цвет фона изображения-заглушки на время загрузки оригинального изображения.
Мягкий режим загрузки изображений

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

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

Принудительная загрузка
Опция позволяет загружать изображения, которые находятся за пределами области видимости, через интервал. Пока посетитель просматривает страницу, изображения могут загружаться принудительно с интервалом, установленным в соответствующем поле. Вы можете установить также нулевое значение — в данном случае все изображения загрузятся немедленно друг за другом.
Исключения на стороне клиента
Вы можете исключить модули, HTML контейнеры или изображения, имеющие определённые CSS классы или ID из отложенной загрузки, указав их через запятую, например: “.moduletable, #my-image, .image-container”. В момент загрузки документа все изображения, имеющие значение данных аттрибутов или изображения, находящиеся в контейнерах, которые имеют значение данных аттрибутов, будут немедленно загружены. Исключения производятся на стороне клиента — изображения не исключаются из обработки PHP, но исключаются из обработки плагином JavaScript. Если вам требуется полное исключение на стороне сервера, вы можете воспользоваться опциями исключающих тегов или классов CSS изображений.
Прослушиватель AJAX
Перезагрузка плагина при событии AJAX, при котором браузер посылает запрос HTTP. Назначение данной опции заключается в необходимости добавить новые изображения в рабочую коллекцию плагина для их отложенной загрузки (будут вовлечены только изображения с установленными data-аттрибутами). Для разработчиков: альтернативный путь включения новых изображений в рабочую коллекцию плагина — использование public метода “refresh” (смотрите техническое руководство для чистого JavaScript плагина).