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

I'm using Mika Tuupola's Lazy Load plugin http://www.appelsiini.net/projects/lazyload to delay loading images as you scroll down a long image gallery. The problem is after 10 images, I use infinite scrolling so I fetch the next 10 images, and append them via ajax. Lazy Loading no longer works on this next batch of appended images.

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

It's a pretty javascript-heavy image gallery, so for everything else (such as tooltips, modal overlays, etc) I've been using jQuery's delegate() to bind to ajax-inserted elements. The problem with the Lazy Load plugin is that I'm not sure what event to bind to.

这是一个相当javascript的图像库，所以对于其他一切（如工具提示，模态叠加等），我一直在使用jQuery的委托（）绑定到插入ajax的元素。 Lazy Load插件的问题是我不确定要绑定到哪个事件。

So say I want to lazy load images with a class of "lazy". I would write this:

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

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

and it works for the first 10 images, but stops working after inserting more via ajax. The only thing I can think of is to use delegate on a load event, like so:

它适用于前10个图像，但在通过ajax插入更多图像后停止工作。我唯一能想到的是在load事件上使用委托，如下所示：

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

but that breaks everything. Thanks!

但这打破了一切。谢谢！

EDIT: The jQuery I use to load more records (this is a Rails app):

编辑：我用来加载更多记录的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();

2 个解决方案

#1

I would use the ajaxStop method.

我会使用ajaxStop方法。

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

removeClass prevents double initialization.

removeClass防止双重初始化。

#2

In addition to Kevin B's answer if you want to avoid ajaxStop jQuery now defines a when() function for that purpose

除了Kevin 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,            
                ...
            });
        }

from: http://api.jquery.com/jQuery.when/

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

#1