Question

我想加载背景图片＆＃34;懒惰＆＃34;图书馆http://afarkas.github.io/lazysizes/
他们确实提到过任何东西＆＃34;懒惰是可能的。但整个文档就是那个：

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

我不知道如何将其用作背景图像。有人在那里有经验吗？

Answer 1

如果您要使用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 + ')';
    }
});

Answer 2

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

示例：

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

Answer 3

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

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

Answer 4

如果您要将图片作为背景加载，请按照此doc进行操作。这是一个lazysizes的插件

Answer 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")

Lazyload背景图像与lazysizes

5 个答案: