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" />有效，如下面的示例所示：

score 4 · Accepted Answer

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

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

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

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

您可以在他们的网站上查看他们的工作示例。

1 回答 1