Question

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

理想情况下，我想将此仅应用于某种内容类型并使用插件而不必编写大量代码/手动替换所有单个节点并引用图像。

大多数插件搜索结果都很陈旧，或者文档数量有限且概念证明不足。我在Lazy load making pages freeze/load very slow on IE?找到了一个有趣的问题，引用justlazy，有人实现了这个或者可以推荐一些吗？

仅供参考 - 我已经尝试https://www.drupal.org/project/lazyloader，但似乎没有任何效果/无法使其发挥作用。我已经通过CKEditor在节点中插入了图像。我知道该模块依赖于drupal图像模块，也许这就是为什么它不起作用，我只是希望有一个插件用懒惰负载替换任何正常的图像引用来消除自定义设置。

Answer 1

创建自己的模块可能是最简单的路线。这就是我所做的。

在我的自定义模块中，我使用了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';
  }
}

然后，更改新<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()挂钩来附加这两个javascript文件。这样一切都会在一个地方。

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

启用模块后，通过theme_image()传递的所有图像都将延迟加载。

<强>增加：

对于直接添加到.tpl.php模板中的图像，或者通过节点添加/编辑表单中的CKEditor添加的图像，它们的标记应遵循自定义模块中定义的相同模式，否则它们会赢得＃t延迟加载。

为了实现这一目标，我可以想到两种方式：

手动更改每个图片标记以符合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);

我认为这两种选择各有利弊。但是我认为第一种选择在第二种情况下更安全，更稳定。在所有映像上启用延迟加载可能会导致意外问题，具体取决于站点配置。

查看bLazy＆＃39; s available options。您可能需要进一步调查哪些更适合您的项目。

希望这会有所帮助。

编辑（2018年4月25日）：

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

（我很快就会加入D8端口）

Answer 2

我为drupal 8构建了一个惰性加载模块。应立即使用：Fancyload - lazy load images pinterest-style

Fancyload将自动以pinterest风格的配色方案将图像延迟加载到您的网站上。它会提取图像的主要颜色并将其投放，直到加载图像为止。

drupal lazyload图像插件或实现？

2 个答案: