将图像延迟加载绑定到ajax请求后插入的新图像

Question

我正在使用Mika
Tuupola的“延迟加载”插件http://www.appelsiini.net/projects/lazyload，以在向下滚动长图像库时延迟加载图像。问题是在10张图像之后，我使用了无限滚动，所以我获取了接下来的10张图像，并通过ajax附加了它们。延迟加载不再适用于下一批附加图像。

这是一个非常漂亮的javascript图片库，因此对于其他所有内容（例如工具提示，模式叠加等），我一直在使用jQuery的委托（）绑定到插入了ajax的元素。延迟加载插件的问题是我不确定要绑定到哪个
事件 。

所以说我想用“ lazy”类来延迟加载图像。我会这样写：

$("img.lazy").lazyload({ 
    effect: "fadeIn" 
});

并且适用于前10张图片，但在通过Ajax插入更多图片后停止工作。我唯一想到的就是在 load 事件上使用委托，如下所示：

$(document).delegate("img.lazy", "load", function(event) {  
    $(this).lazyload({ 
         effect: "fadeIn" 
    });     
});

但这破坏了一切。谢谢！

编辑： 我用来加载更多记录的jQuery（这是一个Rails应用程序）：

$(window).scroll(function() {
    var url;
    url = $(".pagination .next_page").attr("href");
    if (url && $(window).scrollTop() > $(document).height() - $(window).height() - 50) {
    $(".pagination").html("<p>loading more images...</p>");
    return $.getScript(url);
    }
});

$(window).scroll();

Answer 1

我会使用该ajaxStop方法。

$("img.lazy").lazyload({ 
    effect: "fadeIn" 
}).removeClass("lazy");
$(document).ajaxStop(function(){
    $("img.lazy").lazyload({ 
        effect: "fadeIn" 
    }).removeClass("lazy");
});

removeClass 防止双重初始化。