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

【问题标题】：Lazy Loading images with threshold fails with more than one container (jQuery)使用多个容器（jQuery）延迟加载具有阈值的图像失败
【发布时间】：2013-04-10 08:16:28
【问题描述】：

我的站点包含三个水平 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

【问题讨论】：

标签： jquery lazy-loading containers lazy-evaluation threshold

【解决方案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
    });
};

【讨论】：