Jquery lazyload with ajax

我在我的电子商务网站上使用lazyload（）。 lazyload（）效果很好。 我使用这段代码来做到这一点：

$(function(){ $("img.lazy").lazyload({ effect : "fadeIn" }); }); 

还有一些filter，如颜色，价格等，运行ajax并显示新的结果。 当新结果出现时，lazyload（）不起作用。 我知道我必须使用lazyload（）与live（），delegate（）或on（）。 但我是jquery的新手，我不能那样做。 有人可以帮我吗？ 我的jquery版本是1.7.2，我们可以使用on（）。

Answer 1

注意：当这个答案被接受时，这是有效的。 延迟加载插件已更改，现在已损坏。 我不能不接受答案，也不能删除它。

还有另一个Q＆A建议将其作为负责插入额外DOM的AJAX请求的一部分来处理：

将图像延迟加载绑定到ajax请求后插入的新图像

但是，我就是这样做的：

 $(document).on('DOMNodeInserted', 'img.lazy', function() { $(this).lazyload({ effect: 'fadeIn' }); }); 

演示： jsfiddle

Answer 2

不久， 最好的优化方法是在ajax的成功函数中调用lazyload ：

 $.ajax({ url: "your url here", type: "Post", success: function(response){ // handle your success callback here $("img.lazy").lazyload({ effect : "fadeIn" }); } }); 

---

但是如果你想集中调用 lazyload插件，你有两个选择 ：

第一:(因性能不佳而不推荐）

 $(document).on('DOMNodeInserted', '#container', function() { $("img.lazy").lazyload({ effect: 'fadeIn' }); }); 

但请注意“#container”，它是容器的选择器，您将在其中显示新加载的内容，因此上面的代码将在此容器内侦听任何新添加的内容，以便在新图像上再次运行lazyload，

第二:(推荐）

通过将自定义lazyload添加到JQuery来调用它：

 $.fn.myLazyLoad = function() { this.lazyload({ effect : "fadeIn" }); }; 

然后，在所有AJAX请求中调用它：

 $.ajax({ url: "your url here", type: "Post", success: function(response){ // handle your success callback here $("img.lazy").myLazyLoad(); } }); 

Answer 3

窗口加载后加载的图像的延迟加载（例如AJAX）在滚动事件之前不会显示任何图像。 这是因为它在内部硬编码以在窗口加载事件之后触发初始更新。 目前所有上述答案都是错误的。

Answer 4

除了AbdelHady的答案，你可以懒得加载成功的新图像作为回调或使用when()这样：

  $.when(load_new_image()).done(function(i){ if($('img.lazy').length){ $('img.lazy').lazyload({ effect:'fadeIn' }).removeClass('lazy').addClass('lazyloaded'); } }); function load_new_image() { return $.ajax({ url: "your url here", type: "Post", success: function(response){ //append new content $('#container').append(response); } }); } 

NOTA BENE

Answer 5

我有同样的问题，当使用航点无限滚动与延迟加载图像。 （但不适用于ajax内容）。

我用这个解决了这个问题：

 $("img.lazy").lazyload({ effect : "fadeIn", event: "scrollstop", skip_invisible : true }).removeClass('lazy'); $(document).bind('DOMNodeInserted', function(e) { $("img.lazy").lazyload({ effect : "fadeIn", event: "scrollstop", skip_invisible : true }).removeClass('lazy'); }); 

我在DOMNodeInserted事件上绑定延迟加载配置。

Answer 6

我使用下面的代码，它工作：

 $(document).on('ajaxStop', function() { $("img.lazy").lazyload({ effect: 'fadeIn' }); }); 

Answer 7

  $(document).ajaxStop(function() {$('.loading').removeClass('in'); $("img.lazy").lazyload({ effect: "fadeIn", container: $("#scrollable"), threshold: 100, }) }); 

适用于ajax图像。 但是，默认情况下不显示第一个图像。 更新未被触发。