jquery - 延迟加载中的多个容器

Question

我正在尝试将延迟加载插件应用于多个容器。我发现了这个类似的问题：Lazy Load on MULTIPLE Horizo​​ntal containers。

这是我的尝试：http: //jsfiddle.net/BAFMC/

$(".p_outer_content").each(function() {
    var tthis = $(this);
    $(this).find('img').lazyload({
        container: tthis
    });
});​

但我有与提到的问题相同的问题，即延迟加载仅适用于最后一个容器（.p_outer_content）（这是小提琴中的第三个）。

有谁知道如何解决这个问题或有其他建议？提前致谢'

编辑：

好的，每次滚动容器之一时，我都尝试重新应用延迟加载功能：

$(".p_outer_content").each(function() {
    var tthis = $(this);
    $(this).find('img').lazyload({
        container: tthis
    });
});

$(".p_outer_content").scroll(function() {
    var tthis = $(this);
    $(this).find('img').lazyload({
        container: tthis
    });

});​

http://jsfiddle.net/BAFMC/4/

哪个有效，但我不知道这是否是解决它的好方法。但是有没有人想出更好的解决方案？谢谢'

Answer 1

LazyLoad 插件中有一个错误。当您提供自定义容器时，会出现全局变量泄漏。我在此分支中添加了最低限度的必要修复。

https://raw.github.com/marchingants/jquery_lazyload/master/jquery.lazyload.js

这是一个工作演示http://jsfiddle.net/BAFMC/5/

我在该示例中直接使用 github 原始文件，但在您的项目中，克隆文件，将其缩小并在本地使用。

Answer 2

为了让多个 div 使用延迟加载，您必须明确提及图像的容器 ID。当你有两个 div#container1然后#container2写：

$("#container1 img.lazy").lazyload({ container: $("#container1") });

$("#container2 img.lazy").lazyload({ container: $("#container2") });

代替： $("img.lazy").lazyload({ container: $("#container1") });

$("img.lazy").lazyload({ container: $("#container2") });