LazyLoad

Ленивая загрузка изображений
Автор дополнения
Андрей Степаненко
Пакетов
27
Закачек
2 707
Обычно отвечает в течение нескольких дней
Автор дополнения
Пакетов
27
Закачек
2 707
Обычно отвечает в течение нескольких дней
Версия 1.0.2-beta
Дата выпуска 16.08.2019
Загрузки 30
Просмотры 726
Внимание, этот компонент требует версию 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. Вам необходимо проверить ваши шаблоны и чанки.

Сервис проверки валидности html: validator.w3.org/nu/?doc=https://site.ru

Событие


На всяки случай в компонент добавлено событие LazyLoadBeforePagePrerender, которое срабатывает после обработки html страницы.

// Пример замены спецсимвола
<?php
/* @var array $scriptProperties */
switch ($modx->event->name) {
    case 'LazyLoadBeforePagePrerender':
        $output = $scriptProperties['output'];
        $output = str_ireplace('%7C', '|' , $output);
        $modx->event->returnedValues = array('output' => $output);
        break;
}

1.0.2-beta

  • Добавлено событие LazyLoadBeforePagePrerender, вызывается перед отдачей отформатированного html

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