具有延迟大小的延迟加载背景图像答案

【问题标题】：Lazyload background-image with lazysizes具有延迟大小的延迟加载背景图像
【发布时间】：2022-05-12 06:16:37
【问题描述】：

我想用库 http://afarkas.github.io/lazysizes/ 加载背景图像“懒惰”
他们确实提到可以懒惰地加载“任何东西”。但是关于它的整个文档就是那个：

<div data-ride="carousel" data-script="assets/js/bootstrap.min.js" class="carousel lazyload">
    <!-- widget content -->
<div>

我不明白如何将它用于背景图像。有人有这方面的经验吗？

【问题讨论】：

标签： javascript jquery jquery-lazyload

【解决方案1】：

要使用惰性大小加载背景图像，请使用 data-bg 属性

import "lazysizes/plugins/unveilhooks/ls.unveilhooks";

使用示例：

<div class="lazyload" data-bg="/path/to/image.jpg"></div>

【讨论】：

你需要揭开钩子插件才能工作：github.com/aFarkas/lazysizes/tree/…
是否可以延迟加载 webp 和 jpeg 作为 div 的背景图像使用的后备？

【解决方案2】：

如果你想使用lazyload加载背景图片只需要添加一小段代码（无需添加任何插件）-

//add simple support for background images:
document.addEventListener('lazybeforeunveil', function(e){
    var bg = e.target.getAttribute('data-bg');
    if(bg){
        e.target.style.backgroundImage = 'url(' + bg + ')';
    }
});

【讨论】：

@DeepSojitra 你安装了 LazySizes 吗？这个解决方案对我来说很好。

【解决方案3】：

如果你想加载一张图片作为背景，请关注doc。这是一个lazysizes的插件

【讨论】：

【解决方案4】：

可能有人会觉得这很有用。就我而言，使用相同的库 - “lazysizes”我必须将 data-bg 更改为 data-bgset：

<div class="lazyload" data-bgset=""></div>

【讨论】：

【解决方案5】：

如前所述，您需要添加一些插件来做到这一点。这是我用于所有项目的配置。

需要的lazysizes插件：

respimg polyfill（仅在不支持 respimg 的浏览器中需要）
bgset这是核心插件

您可以通过这种方式设置自定义断点

window.lazySizesConfig = window.lazySizesConfig || {};
window.lazySizesConfig.customMedia = {
    '--small'   : '(max-width: 576px)',
    '--medium'  : '(max-width: 768px)'
};

这里是标记

<div class="lazyload" data-bgset="URL-OF-SMALL-IMAGE[--small] URL-OF-MEDIUM-IMAGE[--medium] | URL-OF-FULL-SIZE-IMAGE", data-sizes="auto")

【讨论】：

【解决方案6】：

验证 Lazyload 的版本。

适用于此的版本：

<div class="lazy" data-bg="/path/to/image.jpg"></div>

是：

<script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@17.6.1/dist/lazyload.min.js"></script>

ps：别忘了插入通话

var lazyLoadInstance = new LazyLoad({
  elements_selector: ".lazy",
  load_delay: 100,
  effect : "fadeIn"
  // ... more custom settings?
  });

【讨论】：

你需要将elements_selector: ".lazy" 改成elements_selector: ".lazyload"