Drupal lazyload images плагин или реализация?
Есть ли какой-либо твердый плагин drupal для загрузки изображений или кто-нибудь реализовал это?
В идеале, я хотел бы применить это только к определенному типу контента и использовать плагин, а не кодировать много / вручную заменять все отдельные узлы ссылками на изображения.
Большинство результатов поиска плагинов довольно старые или имеют ограниченную документацию и небольшое доказательство концепции. Я нашел только один интересный вопрос здесь ленивая загрузка делает страницы замораживать / загружать очень медленно на IE? что касается justlazy, кто-нибудь реализовал это или может порекомендовать что-то, пожалуйста?
К вашему сведению - я уже пробовал https://www.drupal.org/project/lazyloader но, похоже, это не имело никакого эффекта / не могло заставить его работать. Я вставил изображения в узлы через CKEditor. Я понимаю, что модуль опирается на модуль drupal image, возможно, поэтому он не работал, я просто надеялся, что есть плагин, который заменяет любые обычные ссылки на изображения с ленивой загрузкой, чтобы устранить пользовательские настройки.
Ответы - Drupal lazyload images плагин или реализация? / drupal lazyload images plugin or implementation?

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 в формах добавления/редактирования узлов, их разметка должна следовать тому же шаблону, что и в пользовательском модуле, иначе они не будут лениво загружаться.
Чтобы это произошло, я могу придумать два способа:
- Вручную измените разметку каждого изображения в соответствии с настройками bLazy по умолчанию. т.е.
<img src="low-res-placeholder.jpg" data-src="original-image.jpg" class="b-lazy" />
- Игнорируйте все вышесказанное и используйте bLazy со следующими опциями для ленивой загрузки каждого отдельного изображения на сайте:
var options = {
selector: "img",
src: "src",
};
var bLazy = new Blazy(options);
Я думаю, что у обоих вариантов есть свои плюсы и минусы. Однако я думаю, что первый вариант намного безопаснее и стабильнее по сравнению со вторым. Включение отложенной загрузки всех образов может вызвать непредвиденные проблемы в зависимости от конфигурации сайта.
Проверить Блази уже существующих вариантов. Возможно, вам придется исследовать дальше, что лучше подходит для вашего проекта.
Надеюсь, это поможет.
Редактирование (25 апреля, 2018):
Я внес свое решение в сообщество Drupal в качестве модуля:
https://www.drupal.org/project/lazy
(Я скоро добавлю порт D8)



If you’re using jQuery (or simliar) do it in document.ready



(function ($) { Drupal.behaviors.CUSTOMMODULE = { attach: function (context, settings) {
? Как запустить этот модуль? Спасибо Осман.









30.10.2019 03:28:14
Я построил модуль ленивой загрузки для drupal 8. Должно работать из коробки: Fancyload-ленивая загрузка изображений pinterest-стиль
Fancyload автоматически обеспечит ленивую загрузку изображений на вашем сайте в цветовой гамме pinterest-style. Он выбирает основной цвет вашего изображения и служит ему до тех пор, пока изображение не будет загружено.