Del*_*ero 10 ajax jquery lazy-loading image infinite-scroll
我正在使用Mika Tuupola的Lazy Load插件http://www.appelsiini.net/projects/lazyload来在您向下滚动长图库时延迟加载图像.问题是在10张图片后,我使用无限滚动,所以我获取接下来的10张图片,并通过ajax附加它们.延迟加载不再适用于下一批附加图像.
这是一个相当javascript的图像库,所以对于其他一切(如工具提示,模态叠加等),我一直在使用jQuery的委托()绑定到插入ajax的元素.Lazy Load插件的问题是我不确定要绑定到哪个事件.
所以说我想懒得加载一类"懒"的图像.我会写这个:
$("img.lazy").lazyload({
effect: "fadeIn"
});
Run Code Online (Sandbox Code Playgroud)
它适用于前10个图像,但在通过ajax插入更多图像后停止工作.我唯一能想到的是在load事件上使用委托,如下所示:
$(document).delegate("img.lazy", "load", function(event) {
$(this).lazyload({
effect: "fadeIn"
});
});
Run Code Online (Sandbox Code Playgroud)
但这打破了一切.谢谢!
编辑: 我用来加载更多记录的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();
Run Code Online (Sandbox Code Playgroud)
use*_*654 17
我会用这个ajaxStop
方法.
$("img.lazy").lazyload({
effect: "fadeIn"
}).removeClass("lazy");
$(document).ajaxStop(function(){
$("img.lazy").lazyload({
effect: "fadeIn"
}).removeClass("lazy");
});
Run Code Online (Sandbox Code Playgroud)
removeClass
防止双重初始化.
归档时间: |
|
查看次数: |
17291 次 |
最近记录: |