背景图片的延迟加载

Question

我正在尝试延迟加载背景图片。为了做到这一点，我添加了jquery的延迟加载插件：jquery-lazy。我们使用npm i jquery-lazy安装它。

为了具有延迟加载的图像，我只需要添加如下所示的延迟类：

<img data-src="image.png" class="lazy">和以下js：

<script>
  $(function($) {
    $("img.lazy").Lazy();
});
</script>

并且它正常工作。

不幸的是，我不知道如何处理这样的背景图像：

<div style="background-image: url(background.jpg)">

实际上是在样式字段的<div>中添加了背景图像...

[我想知道是否可以像处理<img>之类的基本图像一样延迟加载背景图像。我试图通过添加<div class="lazy">来做到这一点，但它不起作用。

Answer 1

您可以将jquery-lazy用于任何html标签：

<div class="lazy" style="display: block; background-image: url('http://jquery.eisbehr.de/lazy/images/3.jpg?t=1585165700');"></div>

$(function() {
    $('.lazy').lazy();
});

请参见网站上的示例（示例具有错误的html标签，但您可以在页面上看到源代码：http://jquery.eisbehr.de/lazy/example_load-background-images