Mar*_*kus 5 drupal lazy-loading drupal-7
是否有任何可靠的drupal插件来延迟加载图像，或者有人实现了吗？
理想情况下，我只想将此内容应用于特定的内容类型并使用插件，而不必编写大量代码/使用对图像的引用手动替换所有单个节点。
大多数插件搜索结果都非常古老，或者文档数量有限，并且没有概念证明。我在这里只发现了一个有趣的问题：延迟加载使页面在IE上冻结/加载非常慢？这是指justlazy，有人实现了这一点还是可以推荐一些东西？
仅供参考-我已经尝试过https://www.drupal.org/project/lazyloader，但似乎没有任何效果/无法使其正常工作。我已经通过CKEditor在节点中插入了图像。我知道该模块依赖于drupal图像模块，这也许就是为什么它不起作用的原因，我只是希望有一个插件可以用延迟加载替换任何常规图像参考，以消除自定义设置。
但是，创建自己的模块可能是最简单的方法。那就是我所做的。
在我的自定义模块中，我使用了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（）覆盖此函数，因为我们要根据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';
}
}
然后，<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) . ' />';
}
}
我使用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()钩子来附加这2个javascript文件。这样，一切都将集中在一个地方。
我建议阅读有关将JavaScript添加到主题或模块的官方教程，以找到最适合您项目的方法。
启用该模块后，所有通过的图像theme_image()都将被延迟加载。
添加：
对于直接添加到.tpl.php模板中的图像，或通过CKEditor以节点添加/编辑形式添加的图像，其标记应遵循自定义模块中定义的相同模式，否则它们不会延迟加载。
为此，我可以想到两种方法：
<?php print theme('image', array('path' => $logo, 'alt' => t('Home'))); ?>
<?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';
}
}
我认为这两种选择都有其优缺点。但是，我认为第一种选择比第二种选择更安全，更稳定。在所有映像上启用延迟加载可能会导致意外问题，具体取决于站点配置。
查看bLazy的可用选项。您可能需要进一步调查，以找出更适合您的项目的项目。
希望这可以帮助。
编辑（2018年4月25日）：
我将解决方案作为模块贡献给了Drupal社区：https :
//www.drupal.org/project/lazy
（我也会尽快添加一个D8端口）