我使用Mika Tuupola的Lazy Load插件
http://www.appelsiini.net/projects/lazyload来拖动加载图像,当您向下滚动一个长的图像库.问题是在10个图像之后,我使用无限滚动,所以我拿下10个图像,并通过ajax附加它们. Lazy Loading将不再适用于下一批附加图像.
这是一个漂亮的javascript重的图像库,所以对于其他一切(如工具提示,模态叠加等),我一直在使用jQuery的delegate()绑定到ajax插入的元素. Lazy Load插件的问题是我不知道要绑定什么事件.
所以说我想懒惰加载一个类“懒惰”的图像.我会写这个：
$("img.lazy").lazyload({
effect: "fadeIn"
});
它适用于前10个图像,但在通过ajax插入更多后停止工作.我唯一可以想到的就是在load事件中使用delegate,就像这样：
$(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();
解决方法
我将使用ajaxStop方法.
$("img.lazy").lazyload({
effect: "fadeIn"
}).removeClass("lazy");
$(document).ajaxStop(function(){
$("img.lazy").lazyload({
effect: "fadeIn"
}).removeClass("lazy");
});
removeClass防止双重初始化.
