Drupal lazyload images плагин или реализация?

Drupal lazyload images плагин или реализация?

07.04.2018 10:38:05 Просмотров 71 Источник

Есть ли какой-либо твердый плагин drupal для загрузки изображений или кто-нибудь реализовал это?

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

Большинство результатов поиска плагинов довольно старые или имеют ограниченную документацию и небольшое доказательство концепции. Я нашел только один интересный вопрос здесь ленивая загрузка делает страницы замораживать / загружать очень медленно на IE? что касается justlazy, кто-нибудь реализовал это или может порекомендовать что-то, пожалуйста?

К вашему сведению - я уже пробовал https://www.drupal.org/project/lazyloader но, похоже, это не имело никакого эффекта / не могло заставить его работать. Я вставил изображения в узлы через CKEditor. Я понимаю, что модуль опирается на модуль drupal image, возможно, поэтому он не работал, я просто надеялся, что есть плагин, который заменяет любые обычные ссылки на изображения с ленивой загрузкой, чтобы устранить пользовательские настройки.

У вопроса есть решение - Посмотреть?

Ответы - Drupal lazyload images плагин или реализация? / drupal lazyload images plugin or implementation?

Является ответом!
osman

08.04.2018 11:21:38

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

В моем пользовательском модуле я использовал 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" />
  1. Игнорируйте все вышесказанное и используйте bLazy со следующими опциями для ленивой загрузки каждого отдельного изображения на сайте:
var options = {
  selector: "img",
  src: "src",
};
var bLazy = new Blazy(options);

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

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

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

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

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

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

https://stackoverflow.com/questions/49711262/drupal-lazyload-images-plugin-or-implementation/49722378#comment86459554_49722378
Вау спасибо за обмен и да в контексте использования ckeditor, хотя я бы подумал, что это должно быть возможно независимо от этого, чтобы применить его через пользовательский модуль, который заменит эти теги IMG и lazyload их в узлах, что означает не обязательно препроцесс, но пост?!?
https://stackoverflow.com/questions/49711262/drupal-lazyload-images-plugin-or-implementation/49722378#comment86459667_49722378
Мне нужно сделать еще несколько чтений, но думаю, что он упомянул, что лучше избегать jQuery? Я обязательно рассмотрю ваш завтра, чтобы увидеть, смогу ли я заставить его работать, было бы хорошо знать, как применять/ограничивать его также только к определенному типу контента.
https://stackoverflow.com/questions/49711262/drupal-lazyload-images-plugin-or-implementation/49722378#comment86459735_49722378
Убедитесь, что читать тоже Блази документации. Как использовать bLazy (lazy load images) If you’re using jQuery (or simliar) do it in document.ready
https://stackoverflow.com/questions/49711262/drupal-lazyload-images-plugin-or-implementation/49722378#comment86463891_49722378
Кроме того, вы можете рассмотреть возможность создания плагина текстового формата. Я просто ответил на другой аналогичный вопрос для D8: drupal.stackexchange.com/a/259444/63081
https://stackoverflow.com/questions/49711262/drupal-lazyload-images-plugin-or-implementation/49722378#comment86469048_49722378
Большое спасибо @osman, #2 я думаю, что это лучший способ пойти, так как у меня слишком много узлов для ручного редактирования в противном случае и будет инвазивным, таким образом, модуль будет иметь преимущество, чтобы применить его ко многим, надеюсь, даже ограничить определенные типы контента / узлы и возможность изменить ленивую настройку нагрузки в модуле таким образом. Может быть, вы знаете, как вставить условие для типа контента "xyz" в этот модуль текстового формата?
https://stackoverflow.com/questions/49711262/drupal-lazyload-images-plugin-or-implementation/49722378#comment86479733_49722378
не могли бы Вы уточнить, могу ли я создать этот текстовый формат "плагин" также для D7, который вы объяснили в другом сообщении для D8? Этот код входит в пользовательский модуль или это другой подход? Это было бы моим предпочтением, чтобы избежать редактирования HTML узлов для реализации blazy. Я посмотрел на #2 выше, но не уверен, как начать с модуля "использовать blazy". Мне все равно нужно (function ($) { Drupal.behaviors.CUSTOMMODULE = { attach: function (context, settings) { ? Как запустить этот модуль? Спасибо Осман.
https://stackoverflow.com/questions/49711262/drupal-lazyload-images-plugin-or-implementation/49722378#comment86490774_49722378
Вы также можете проверить модуль примеры для создания модуля фильтра , который вам нужен.
https://stackoverflow.com/questions/49711262/drupal-lazyload-images-plugin-or-implementation/49722378#comment86532320_49722378
@osmann мне удалось создать пользовательский модуль для загрузки Блази.минута.JS и загрузил код из #2 в blazy_load.js, но, похоже, он не выполняется, используя параметры с селектором " img " (который, как я ожидаю, должен работать с моим текущим в JPG"> теги). Я загружаю это неправильно? Запутался, как вы упомянули jQuery раньше...
https://stackoverflow.com/questions/49711262/drupal-lazyload-images-plugin-or-implementation/49722378#comment86544373_49722378
видя, что в этом есть необходимость, я только что выпустил модуль D7 на drupal.org/project/lazy я скоро добавлю версию D8.
https://stackoverflow.com/questions/49711262/drupal-lazyload-images-plugin-or-implementation/49722378#comment86553121_49722378
Ничего себе, вы удивительны, я попробую его и дам вам знать :) определенно нужно, учитывая многие Результаты поиска, но не хватает встроенных изображений. Возможно, на более позднем этапе было бы целесообразно рассмотреть возможность присоединения его к модулю blazy для его улучшения. Для моего собственного понимания, повторите мой вопрос, Правильно ли я выполнил blazy, загрузив #2 в a .js или я что-то неправильно понял ?
https://stackoverflow.com/questions/49711262/drupal-lazyload-images-plugin-or-implementation/49722378#comment86558110_49722378
Я попробовал ваш модуль, спасибо, выглядит отличная работа, особенно обеспечивая параметры configuragble! Ницца. Я вижу блейзи.минута.js загружен и разметка изменена, однако, к сожалению, он еще не запускает загрузку. Я думаю, что из-за нескольких узлов (модуль faq) отображается на одной странице, но сначала загружается .складной (дисплей:блок) .свернутый (дисплей: нет) и после нажатия вкладки, чтобы показать содержимое, которое он удаляет .свернутый (дисплей: нет). Будут ли это невидимые (скрытые) элементы? Я попробовал loadInvisible, но он загружает все изображения и, следовательно, больше не ленивая загрузка. Есть ли способ обойти это?
https://stackoverflow.com/questions/49711262/drupal-lazyload-images-plugin-or-implementation/49722378#comment86558874_49722378
Рад поболтать, если вы свободны некоторое время / день, очень признателен. Я посмотрел на него .js, ответственный за toggleclass, рухнул, и хотя я не эксперт js, мне интересно, может ли мне понадобиться снова запустить функцию blazy, чтобы она могла сработать?
https://stackoverflow.com/questions/49711262/drupal-lazyload-images-plugin-or-implementation/49722378#comment91572137_49722378
Еще раз спасибо за этот замечательный модуль и продолжая совершенствовать его. Я обнаружил одну проблему сейчас, когда она разрывает якорные ссылки и задается вопросом, Можем ли мы как-то решить эту проблему? drupal.org/project/lazy/issues/2999351#comment-12771971
Stef Van Looveren

30.10.2019 03:28:14

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

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

Закрыть X