延迟加载带有阈值的图像失败，并有多个容器（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 
    }); 
};