jQuery.Lazy() - 延迟加载具有 id 的部分的背景图像

Question

我想使用 .lazy() 方法为具有 id 的部分对一张图像应用延迟加载。该部分已通过 CSS 配置背景。下面是代码：

HTML

  <section id="showcase">
  </section>

CSS

/* Showcase*/
#showcase {
  min-height: 400px;
  background: url("../img/example.jpg") no-repeat -300px -500px;
  background-size: cover;
}

JS

<script>
  $(function() {
     $("#showcase").lazy();
  });
 </script>

我应该如何更改代码？因为现在它不起作用。它只有在我有代码和标签时才有效 <img class="lazy" data-src="../img/example.jpg" /> 正如您在下面的示例中看到的那样：

Answer 1

根据他们网站上的 JQuery.Lazy 文档和演示，您可以通过将 data-src 属性设置为要加载背景图像的元素来加载背景图像。

所以在你的情况下你可以这样做：

<section id="showcase" data-src="../img/example.jpg"></section>

然后您需要从 css 样式中删除 background-image 定义。

您可以在 their website 上查看他们的工作示例。

jQuery.Lazy() - lazy load background image of section with id