我正在使用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();
我会使用该ajaxStop方法。
ajaxStop
$("img.lazy").lazyload({ effect: "fadeIn" }).removeClass("lazy"); $(document).ajaxStop(function(){ $("img.lazy").lazyload({ effect: "fadeIn" }).removeClass("lazy"); });
removeClass 防止双重初始化。
removeClass