Question

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

为了具有延迟加载的图像，我只需要添加如下所示的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

延迟加载背景图片

1 个答案: