Вернуться в карточку решения Главная>База знаний (FAQ)>Отложенная загрузка изображений

Отложенная загрузка изображений

К каким изображениям рекомендуется применять механизм отложенной загрузки

У пользователей часто возникает вопрос - для каких изображений нужно использовать отложенную загрузку, а для каких нет.


Стоит использовать отложенную загрузку для:
  • Изображения товаров каталога
  • Картинки включенные в новости, статьи и подобные, входящие контентную часть страницы
  • Баннеры
  • Галереи изображений
  • Прочие большие по весу и размеру картинки


Однозначно Не стоит использовать отложенную загрузку для:
  • Иконок
  • Логотипа
  • Активных элементов сайта
  • Шапки сайта
  • Маленьких изображений

Почему я не рекомендую применять отложенную загрузку к этим элементам? Потому что эффект прироста скорости и уменьшения веса страницы будет несопоставим с неудобствами пользователя от ожидания погрузки важных элементов.


Работа модуля с фоновыми изображениями (background-image)

Вопрос использования отложенной загрузки для блоков с фоновыми изображениями (background-image) является одним из наиболее часто задаваемых.

Модуль позволяет реализовать отложенную загрузку для фоновых изображений.
Сделать это немного сложнее, чем настроить работу со стандартным тегом <img>, т.к. к сожалению, в автоматическом режиме пропарсить и провести автозамену невозможно.

Для адаптации описанной на данной странице требуются базовые навыки работы с кодом. Рекомендую обратиться к разработчику или поддержке модуля


Для применения отложенной загрузки к элементам с фоновыми изображениями нужно:
1. У элемента указать класс agll0708
2. Убрать фоновое изображение из стиля и указать его в аттрибуте data-src
3. Если необходимо показывать прелоадер добавить класс agll0708bg и один из пяти классов иконки прелоадера (ag-loading, ag-loading2, ag-loading3, ag-loading4, ag-loading5)

Пример кода блока до:
<div class="lazyload-bg-block" style="background-image:url(/modules/lazyload/big_image/9.png);"></div>

Приводим код блока к виду:
<div class="lazyload-bg-block agll0708 agll0708bg ag-loading" data-src="/modules/lazyload/big_image/9.png"></div>


Автоматизированный способ вывода классов и проверки модуля на активность можно найти тут

Страницы исключения

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

Способ 1: Указать адреса страниц в настройке "Страницы исключения"

В данной настройке можно указывать как конечные адреса страниц к примеру: /personal/cart/
Так и адреса всего вложенного раздела по маске: /personal/* - данная инструкция отключит отложенную загрузку на всех страницах, адрес которых начинается в /personal/


Способ 2: Указание константы LOCK_LAZYLOAD

В некоторых случаях требуется более гибкое управление отключением отложенной загрузки. Для этого был добавлен механизм отключения работы модуля по установленной константе. На страницах, где задана константа "LOCK_LAZYLOAD" модуль будет не активен.

Пример установки константы:
define("LOCK_LAZYLOAD", "Y");

Прелоадер. Замена, настройка

Прелоадер появляется на месте картинок, загружаемых по механизму отложенной загрузки, только при наличии заданных высоты и ширины (width и height).

Замена анимации прелоадера


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


loading.gif


Установить свою анимацию загрузки можно через CSS-стили задав стиль по примеру:

.agll0708bg { background-image: url('/путь_до_файла/название_файла.gif') !important; }


У картинок не заданы размеры, но хочется отображать прелоадер


Заданные размеры необходимы для отображения анимации загрузки. В последней версии модуля была разработана настройка автоматически задающая размеры картинками до загрузки.

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



Для разработчиков

При ручной подстройке кода сайта под работу модуля (в случаях когда по lazyload загружается background или блок адаптирован под загрузку не через настройку селекторов, а вручную) рекомендуется проверять наличие модуля и включен ли модуль.


Ниже публикую пример кода которым пользуюсь сам (актуально начиная с версии модуля 2.2.1):
<? if(CModule::IncludeModule("arturgolubev.lazyload")){ if(CArturgolubevLazyload::chechEnable()) $lazy_active = 1; } ?> <?if($lazy_active):?> <div class="lazyload-bg-block <?=CArturgolubevLazyload::getBackgroundClass();?>" data-src="/modules/lazyload/big_image/9.png"></div> <?else:?> <div class="lazyload-bg-block" style="background-image: url(/modules/lazyload/big_image/9.png);"></div> <?endif;?>


Тот же код с комментариями:
<? if(CModule::IncludeModule("arturgolubev.lazyload")){ // проверка установлен ли модуль и не закончился ли демо-период if(CArturgolubevLazyload::chechEnable()) $lazy_active = 1; // проверка опций включен отключен в модуле } ?> <?if($lazy_active):?> <?// вывод адаптированной версии если модуль работает?> <div class="lazyload-bg-block <?=CArturgolubevLazyload::getBackgroundClass();?>" data-src="/modules/lazyload/big_image/9.png"></div> <?else: ?> <?// вывод стандартной версии без отложенной загрузки?> <div class="lazyload-bg-block" style="background-image: url(/modules/lazyload/big_image/9.png);"></div> <?endif;?>

Настройки селекторов для популярных решений

aspro.next

Для решения aspro.next используйте следующий набор селекторов (указать в настройке "К каким картинкам применять"):

.img img, .image_wrapper_block img, .image img, .slides img

bitlate.foodshop

Для решения bitlate.foodshop используйте следующий набор селекторов (указать в настройке "К каким картинкам применять"):

.img-wrap img, .catalog-category img
Список не окончательный и будет пополняться

Решение типовых проблем

Настройки сделаны, но отложенная загрузка не работает

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

1. Не полная <meta> с указанием кодировки и типа документа.

На некоторых сайтах встречается указание meta кодировки такого типа:
Для windows-1251: <meta charset="windows-1251"> Для UTF-8: <meta charset="UTF-8">

Для корректной работы библиотеки phpQuery требуется указание не только кодировки, но и типа документа:
Для windows-1251: <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /> Для UTF-8: <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />


2. Дублирование jQuery, старя версия jQuery

При настройке параметра модуля "Подключить встроенную библиотеку JQuery" проверьте, не подключена ли библиотека напрямую, через код. Если библиотека подключена, дублирование и включение галочки не желательно.

Если подключение jQuery идёт напрямую через код, а не из настроек модуля, необходимо убедиться, что версия подключенной библиотеки выше чем 1.8.3. Для корректной работы библиотеки требуется jQuery версии 1.8.3 или выше

3. Нет закрывающего тега </body>

Это так же может быть одной из причин. Если нет закрывающего тега body просто добавьте его

Крутится прелоадер, загрузка картинки не происходит

Проблема: Крутится прелоадер, загрузка картинки не происходит.

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