Плагин или реализация drupal lazyload images?

Однако создание собственного модуля может быть самым простым путем. Вот что я сделал.

В моем настраиваемом модуле я использовал bLazy, легкий сценарий отложенной загрузки и мульти-обслуживающего изображения.

Модуль довольно прост, я вас расскажу:

В Drupal 7 theme_image () отвечает за вывод разметки <img ... /> для всех изображений, отрисованных программно. Это включает изображения полей и любое ручное использование theme('image', $variables).

Например;

<?php print theme('image', array('path' => $logo, 'alt' => t('Home'))); ?>

Итак, сначала вам нужно переопределить функцию theme_image() через hook_theme_registry_alter (), потому что мы хотим изменить некоторые атрибуты тега IMG на основе требований по умолчанию сценария bLazy.

<?php
/**
 * Implements hook_theme_registry_alter().
 */
function CUSTOMMODULE_theme_registry_alter(&$theme_registry) {
  if (isset($theme_registry['image'])) {
    $theme_registry['image']['function'] = 'theme_CUSTOMMODULE_image';
  }
}

Затем измените вывод разметки <img /> в этой новой функции theme_CUSTOMMODULE_image(). Сравните следующее с функцией тематики theme_image():

<?php
/**
 * Overrides theme_image().
 */
function theme_CUSTOMMODULE_image($variables) {
  // Skip Blazy rendering if variables contain `.no-b-lazy` CSS class name.
  if (!empty($variables['attributes']['class']) && in_array('no-b-lazy', $variables['attributes']['class'])) {
    return theme_image($variables);
  }
  else {
    $attributes = $variables['attributes'];
    $attributes['src'] = file_create_url(drupal_get_path('module', 'CUSTOMMODULE') . '/assets/clear.gif');
    $attributes['data-src'] = file_create_url($variables['path']);
    $attributes['class'][] = 'b-lazy';
    foreach (array(
      'width',
      'height',
      'alt',
      'title',
    ) as $key) {
      if (isset($variables[$key])) {
        $attributes[$key] = $variables[$key];
      }
    }
    return '<img' . drupal_attributes($attributes) . ' />';
  }
}

Я использовал прозрачное изображение GIF размером 1x1 пиксель в качестве изображения-заполнителя в качестве значения атрибута src и исходный путь к изображению в качестве значения data-src. Наконец, добавлено имя класса .b-lazy в качестве селектора по умолчанию.

Остается только загрузить библиотеку bLazy и простой скрипт для загрузки bLazy на каждой странице или на каждой странице темы (без прав администратора).

(function ($) {
  Drupal.behaviors.CUSTOMMODULE = {
    attach: function (context, settings) {
      // @see http://dinbror.dk/blog/blazy/?ref=example-page#Options
      var options = {};
      var bLazy = new Blazy(options);
    }
  };
}(jQuery));

В том же модуле я реализовал ловушку hook_page_build() для прикрепления этих двух файлов javascript. Таким образом, все будет в одном месте.

Я рекомендую прочитать официальное руководство по Добавление JavaScript в вашу тему или модуль, чтобы найти наиболее подходящий метод для вашего проекта.

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

ДОБАВЛЕН:

Для изображений, добавленных непосредственно в шаблоны .tpl.php, или изображений, добавленных через CKEditor в формах добавления / редактирования узлов, их разметка должна соответствовать тому же шаблону, который определен в настраиваемом модуле, иначе они не будут загружаться лениво.

Чтобы это произошло, я могу думать двумя способами:

1. Вручную измените разметку каждого изображения в соответствии с настройками bLazy по умолчанию. т.е.

<img src = "low-res-placeholder.jpg" data-src = "original-image.jpg" class = "b-lazy" />

2. Не обращайте внимания на все вышеперечисленное и используйте bLazy со следующими параметрами для ленивой загрузки каждого изображения на сайте:

var options = {
  selector: "img",
  src: "src",
};
var bLazy = new Blazy(options);

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

Посмотрите Доступные Варианты от bLazy. Возможно, вам придется дополнительно изучить, что лучше подходит для вашего проекта.

Надеюсь это поможет.

РЕДАКТИРОВАТЬ (25 апреля 2018 г.):

Я представил свое решение сообществу Drupal в виде модуля:
https://www.drupal.org/project/lazy

(Скоро я добавлю порт D8)

Я создал модуль отложенной загрузки для drupal 8. Должен работать из коробки: Fancyload - отложенная загрузка изображений в стиле pinterest

Fancyload will automatically provide lazyloading of images on your website in a pinterest-style color scheme. It fetches the main color of your image and serves it until your image is loaded.