结合图像迟缓装载到AJAX请求后插入新的图像(Binding image lazy loading

我使用的是米卡Tuupola的延迟加载插件http://www.appelsiini.net/projects/lazyload向下滚动查看长图库延迟加载图像。 问题是10倍后的图像，我用无限滚动，所以我获取下一个10幅图像，并通过AJAX添加他们。 延迟加载不再适用于这下一批附加图像。

这是一个非常JavaScript的沉重的图片库，所以对于一切（如工具提示，模态叠加等），我一直在使用jQuery的委托（）结合AJAX-插入的元素。 与延迟加载插件的问题是，我不知道绑定到什么事件 。

所以说我想延迟加载图片一类的“懒”。 我会这样写：

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

和它的作品的第10张图像，但停止通过AJAX将更多的工作后。 我能想到的唯一的事情就是用委托上的负载情况下，像这样：

$(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防止双初始化。

Answer 2:

除了凯文B的答案，如果你想避免ajaxStop jQuery的现在定义when()函数用于这一目的

// the following code will be executed when the ajax request resolve.
// the ajax function must return the value from calling the $.ajax() method.

    $.when(load_new_image(1), load_new_image(2), load_new_image(3)).done(function(i1, i2, i3){

            if($('img.lazy').length){

                 $('img.lazy').lazyload({ 

                          effect:'fadeIn'

                 }).removeClass('lazy').addClass('lazyloaded');

            }

        });

        function load_new_image(image_id) {

            return $.ajax({
                url: "someUrl",
                dataType: "json",
                data:  yourJsonData,            
                ...
            });
        }

来自： http://api.jquery.com/jQuery.when/

文章来源: Binding image lazy loading to new images inserted after ajax request