结合图像延迟加载到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（）＆GT; $（文件）.height（） -  $（窗口）.height（） -  50）{
    $（分页）HTML（＆LT; P＆GT;加载更多图片...＆LT; / P＆gt;中）。
    返回$ .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屋！