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

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

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

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

$("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("
loading more images...
"); 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

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

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