jQuery.Lazy（） - 延迟加载带有id的部分的背景图像

Question

我想为一个图像应用延迟加载，方法.lazy（）用于id的部分。该部分已通过CSS配置后台。以下是代码：

HTML

scikit-learn

CSS

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

JS

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

我应该如何更改代码？因为现在它不起作用。只有当我有一个代码和一个标记<script> $(function() { $("#showcase").lazy(); }); </script> 时它才有效，如下例所示：

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上查看他们的工作示例。