javascript - Lazyload background-image with lazysizes

Question

I want to load a background-image "lazy" with the library http://afarkas.github.io/lazysizes/
They do mention that the loading of "anything" lazily is possible. But the whole documentation on that is that one:

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

And I don't get how I could use that for a background-image. Does anybody have experience there on that?

Answer 1

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

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

使用示例：

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

Answer 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 + ')';
    }
});

Answer 3

如果您想将图像加载为背景，请遵循此文档。这是一个lazysizes的插件

Answer 4

可能有人会发现这很有用。在我的情况下，使用相同的库 - “lazysizes”我必须将data-bg更改为data-bgset：

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

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