javascript - 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" />正如您在下面的示例中看到的:

http://jquery.eisbehr.de/lazy/example_basic-usage

Answer 1

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

因此在您的情况下，您可以执行以下操作:

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

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

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