是否有任何可靠的 drupal 插件来延迟加载图像或有人实现了这个？
理想情况下，我只想将其应用于特定的内容类型并使用插件，而不必编写大量代码/手动将所有单个节点替换为对图像的引用。
大多数插件搜索结果都非常陈旧，或者文档有限且概念证明很少。我在这里只发现了一个有趣的问题Lazy load making pages freeze/load very slow on IE?，它指的是justlazy，有人实现了这个或者可以推荐一些东西吗？
仅供参考 - 我已经尝试过 https://www.drupal.org/project/lazyloader 但似乎没有任何效果/无法使其工作。我已通过 CKEditor 在节点中插入图像。我知道该模块依赖于drupal图像模块，也许这就是它不起作用的原因，我只是希望有一个插件可以用延迟加载替换任何正常的图像引用以消除自定义设置。
【问题讨论】：
标签： drupal drupal-7 lazy-loading
创建自己的模块可能是最简单的方法。我就是这么做的。
在我的自定义模块中，我使用了bLazy，这是一个轻量级的延迟加载和多服务图像脚本。
该模块非常简单，我将引导您完成：
在 Drupal 7 中，theme_image() 负责为所有以编程方式呈现的图像输出 <img ... /> 标记。这包括现场图像和theme('image', $variables) 的任何手动使用。
例如；
<?php print theme('image', array('path' => $logo, 'alt' => t('Home'))); ?>
所以首先需要通过hook_theme_registry_alter()覆盖theme_image()函数，因为我们要根据bLazy脚本的默认要求来改变IMG标签的一些属性。
<?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';
}
}
然后，在新的 theme_CUSTOMMODULE_image() 函数中更改 <img /> 标记的输出。将以下内容与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) . ' />';
}
}
我使用了一个 1x1 像素的透明 GIF 图片作为占位符图片作为 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 文件。这样，一切都将集中在一个地方。
我建议阅读Adding JavaScript to your theme or module 的官方教程以找到最适合您项目的方法。
启用该模块后，通过theme_image() 传递的所有图像都将被延迟加载。
添加：
对于直接在.tpl.php模板中添加的图像，或者通过CKEditor在节点添加/编辑表单中添加的图像，它们的标记应该遵循自定义模块中定义的相同模式，否则它们不会延迟加载。
要做到这一点，我可以想到两种方法：
<img src="low-res-placeholder.jpg" data-src="original-image.jpg" class="b-lazy" />
var options = {
selector: "img",
src: "src",
};
var bLazy = new Blazy(options);
我认为这两种选择各有利弊。但是我认为第一种选择比第二种选择更安全、更稳定。根据站点配置，对所有图像启用延迟加载可能会导致意外问题。
查看 bLazy 的 available options。您可能需要进一步调查什么更适合您的项目。
希望这会有所帮助。
编辑（2018 年 4 月 25 日）：
我将我的解决方案作为一个模块贡献给 Drupal 社区：
https://www.drupal.org/project/lazy
（我也会尽快添加 D8 端口）
【讨论】：
If you’re using jQuery (or simliar) do it in document.ready
我为 drupal 8 构建了一个延迟加载模块。应该可以开箱即用：Fancyload - lazy load images pinterest-style
Fancyload 会以 pinterest 风格的配色方案自动在您的网站上提供延迟加载图像。它会获取图像的主要颜色并提供它，直到您的图像加载为止。
【讨论】：