结合图像延迟加载到AJAX请求后插入新形象 [英] Binding image lazy loading to new images inserted after ajax request
问题描述
我使用的是米卡Tuupola的延迟加载插件 http://www.appelsiini.net/projects/lazyload 以延迟加载图像,你向下滚动很长的图片库。问题是,10后的图像,我用无限滚动,所以我取下一条10张图像,并通过AJAX添加他们。延迟加载不再对这个下一批附加的图像作品。
这是一个pretty的JavaScript的沉重的图片库,所以对于一切(如工具提示,模态叠加等),我一直在使用jQuery的委托()结合AJAX-插入的元素。与延迟加载插件的问题是,我不知道是什么的事件的结合。
所以说,我想延迟加载图像类懒惰的。我会写这样的:
$(img.lazy)。lazyload({
大意是:淡入
});
和它的作品的第10张图像,但将停止通过AJAX插入更多的工作后。我唯一能想到的就是使用代理上的负荷事件,像这样:
$(文件).delegate(img.lazy,负荷,函数(事件){
$(本).lazyload({
大意是:淡入
});
});
不过,打破一切。 谢谢!
编辑: jQuery的我用来加载更多的记录(这是个Rails应用程序):
$(窗口).scroll(函数(){
VAR URL;
URL = $(分页.next_page。)ATTR(HREF)。
如果(网址&安培;&安培; $(窗口).scrollTop()> $(文件).height() - $(窗口).height() - 50){
$(分页)HTML(< P>加载更多图片...< / P>中)。
返回$ .getScript(URL);
}
});
$(窗口).scroll();
我会使用 ajaxStop
方法。
$(img.lazy)。lazyload({
大意是:淡入
})removeClass移除(懒)。
$(文件).ajaxStop(函数(){
$(img.lazy)。lazyload({
大意是:淡入
})removeClass移除(懒)。
});
removeClass移除
prevents双初始化。
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.
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.
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:
$(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):
$(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();
I would use the ajaxStop
method.
$("img.lazy").lazyload({
effect: "fadeIn"
}).removeClass("lazy");
$(document).ajaxStop(function(){
$("img.lazy").lazyload({
effect: "fadeIn"
}).removeClass("lazy");
});
removeClass
prevents double initialization.
这篇关于结合图像延迟加载到AJAX请求后插入新形象的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!