drupal lazyload 图像插件或实现？

Question

是否有可靠的 drupal 插件来延迟加载图像或是否有人实现了这个？

理想情况下，我只想将其应用于特定内容类型并使用插件，而不必编写大量代码/手动将所有单个节点替换为对图像的引用。

大多数插件搜索结果都很旧，或者文档有限，概念证明也很少。我在这里只发现了一个有趣的问题 Lazy load making pages freeze/load very slow on IE? which is refering to justlazy，有人实现过这个问题或者可以推荐一些东西吗？

仅供参考 - 我已经尝试 https://www.drupal.org/project/lazyloader 但似乎没有任何效果/无法使其工作。我已经通过 CKEditor 在节点中插入图像。我知道该模块依赖于 drupal 图像模块，也许这就是它不起作用的原因，我只是希望有一个插件可以用延迟加载替换任何普通图像引用以消除自定义设置。

Answer 1

创建您自己的模块可能是最简单的方法。我就是这么做的。

在我的自定义模块中，我使用了 bLazy、轻量级延迟加载和 multi-serving 图像脚本。

模块很straight-forward，我带你看一下：

在 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 class 名称作为默认选择器。

只剩下加载 bLazy 库和一个简单的脚本来在每个页面或每个主题页面上加载 bLazy (non-admin)。

(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 文件。这样一切都会在一个地方。

我建议阅读 Adding JavaScript to your theme or module 的官方教程，以找到最适合您项目的方法。

启用该模块后，所有通过 theme_image() 的图像都将是 lazy-loaded。

已添加：

对于在.tpl.php模板中直接添加的图片，或者通过CKEditor在节点add/edit表单中添加的图片，其标记应遵循自定义模块中定义的相同模式，否则将获胜't lazy-load.

为了做到这一点，我想到了两个办法：

手动更改每个图像标记以满足 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);

我认为这两种选择各有利弊。但是，我认为第一种选择比第二种选择更安全、更稳定。根据站点配置，在所有图像上启用 lazy-load 可能会导致意外问题。

查看 bLazy 的 available options。您可能需要进一步调查什么更适合您的项目。

希望这对您有所帮助。

编辑（2018 年 4 月 25 日）：

我将我的解决方案作为一个模块贡献给了 Drupal 社区：
https://www.drupal.org/project/lazy

（我也会尽快添加 D8 端口）

Answer 2

我已经为 drupal 8 构建了一个延迟加载模块。应该开箱即用：Fancyload - lazy load images pinterest-style

Fancyload will automatically provide lazyloading of images on your website in a pinterest-style color scheme. It fetches the main color of your image and serves it until your image is loaded.

drupal lazyload 图像插件或实现？

drupal lazyload images plugin or implementation?

drupal

lazy-loading

drupal-7