LazyLoad

Ленивая загрузка изображений
Автор дополнения
Андрей Степаненко
Пакетов
27
Закачек
2 510
Обычно отвечает в течение суток
Автор дополнения
Пакетов
27
Закачек
2 510
Обычно отвечает в течение суток
Версия 1.0.0-beta
Дата выпуска 28.06.2019
Загрузки 8
Просмотры 327
Внимание, этот компонент требует версию PHP 5.6 или выше! Если ваш сайт использует PHP ниже требуемого, установка этого дополнения может его сломать.
Компонент перед отдачей html на фронтенд, выборочно заменяет src на заглушку (на стороне сервера), а после того как загрузилась страница, с помощью js изображения автоматически подгружаться в зависимости от положения полосы прокрутки.

Внимание!!!, Это не js плагин который срабатывает после загрузки фронденда. Вся замена src производится на бэкенд части, во время рендинга на событии modx OnWebPagePrerender после обработки всех плейсхолдеров.


Возможности


  • Оптимизация скорости загрузки страницы
  • Повышение процент в Google PageSpeed Insights

Быстрый старт


  1. Установить компонент
  2. Прописать селекторы классов с изображениями или c контейнерами с изображениями в системной настройке lazyload_selectors(любое количество селекторов через запятую)

Для контейнеров: #products img или .lists_products img
<ul id="products" class="lists_products clearfix">
    <li><img src="image/car.jpg" alt="" ></li>
</ul>

Для изображений: .products_img
<ul class="clearfix">
    <li><img class="products_img" src="image/car.jpg" alt="" ></li>
</ul>



Индексация изображений


Изображения будут аналогично индексировать как и раньше, так как поисковики в первую очередь проверяют data-src, если в нем есть значение то поисковая система не будет обращать внимание на атрибут src

Картинки скачиваются по ссылкам из атрибута src тега img, а также атрибутов data-src и data-original (в этом случае наличие ссылки на изображение в атрибуте src не обязательно).
https://yandex.ru/support/images/indexing.html

Поехала верстка


В случае если у вас поехала верстка после включения компонента, то это означает что у вас не валиден html. Вам необходимо проверить ваши шаблоны и чанки.

1.0.0-beta

  • New build script.

Последние обсуждения в сообществе MODX.pro