jquery - 使用多个容器（jQuery）延迟加载具有阈值的图像失败

Question

我的网站包含三个水平 div（容器），它们都在列表视图（ul -> li）中具有延迟加载图像。当“阈值”设置为“0”时，它们都加载得很好，当我向右滚动时，所有图像都会加载。

但是，当我将“阈值”设置为“500”时，它只是第一个延迟加载的容器。其他 div 容器只会开始延迟加载，直到我滚动到第一个 div 容器的末尾。

示例：如果我尝试在第二个 div 容器中滚动，则不会开始加载图像。延迟加载仅在第一个 div 容器滚动到其末尾时开始。

我的脚本：

  <script type="text/javascript" charset="utf-8">
  $(function () {
      $("img").lazyload({ container: $(".horizontalBookList1") });
  });
  $(function () {
      $("img").lazyload({ container: $(".horizontalBookList2") });
  });
  $(function () {
      $("img").lazyload({ container: $(".horizontalBookList3") });
  });
  $("img").lazyload({
      effect: "fadeIn"
  });
  $("img").lazyload({
      threshold: 500
  });
  </script>

提前，非常感谢你:)

延迟加载脚本的链接：http: //www.appelsiini.net/projects/lazyload

Answer 1

而不是初始化插件五次只做三遍。每个容器一次，并且仅用于每个容器内的图像。以下应该工作：

$(function() {
    $(".horizontalBookList1 img").lazyload({ 
        container: $(".horizontalBookList1"),
        effect: "fadeIn,"
        threshold: 500
    });
    $(".horizontalBookList2 img").lazyload({ 
        container: $(".horizontalBookList2"),
        effect: "fadeIn,"
        threshold: 500
    });
    $(".horizontalBookList3 img").lazyload({ 
        container: $(".horizontalBookList3"),
        effect: "fadeIn,"
        threshold: 500
    });
};