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()theming:

<?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(), чтобы прикрепить эти 2 файла javascript. Таким образом все будет в одном месте.

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

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

ДОБАВЛЕН:

Для изображений, добавленных непосредственно в .tpl.phpшаблоны 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);

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

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

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

Редактирование (25 апреля, 2018):

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

(Я скоро добавлю порт D8)

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

Fancyload автоматически обеспечит ленивую загрузку изображений на вашем сайте в цветовой гамме pinterest-style. Он выбирает основной цвет вашего изображения и служит ему до тех пор, пока изображение не будет загружено.