Плагин Lazy load для MODX Revolution

Добавление от 27 марта 2019: теперь данный плагин доступен в виде стандартного дополнения для MODX, то есть можно просто установить его из стандартнтого репозитария и сразу переходить к Шагу 3

Шаг 1. Скачиваем скрипт yall.min.js с сайта https://github.com/malchata/yall.js

Подключаем его на сайте и активизируем:


    <script src="путь_до_файла/yall.min.js"></script>
    <script>document.addEventListener("DOMContentLoaded", yall);</script>

Шаг 2. Создаем плагин lazy, привязываем к событию OnWebPagePrerender

    
    <?php
    if ($modx->event->name == 'OnWebPagePrerender') {
        $content = &$modx->resource->_output;
        preg_match_all('/]+>/i', $content, $images);
        if (count($images)) {
            foreach ($images[0] as $image) {
                preg_match('/(class)=("[^"]*")/i', $image, $classValue);
                $imageClasses = explode(" ", str_replace('"', '', $classValue[2]));
                if (in_array("lazy", $imageClasses)) {
                    $img_real = str_replace(" src=", " data-src=", $image);
                    $content = str_replace($image, $img_real, $content);
                }
            }
        }
    }
    

Шаг 3. Изображениям, которые хотим лениво загружать, добавляем класс lazy


<img src="адрес_картинки.jpg" class="some_class lazy" alt="Я ленивое">

Шаг 4. Проверяем. Все должно работать.


Теги: плагин, lazy load, оптимизация, изображения, img, pagespeed

Помогла статья? Угости чашкой кофе =)

Сообщение отправлено

Закрыть