Question

我正在尝试将Lazy Load plugin应用于多个容器。我发现了类似的问题：Lazy Load on MULTIPLE horizontal containers。

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

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

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

修改

好的，我每次滚动其中一个容器时都尝试重新应用lazyload函数：

$(".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与lazyload一起工作，你必须明确地提到图像的容器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") });

Lazy Load中的多个容器

2 个答案: