带有ajax的jQuery惰性加载

Question

我在电子商务网站上使用了lazyload（）。 lazyload（）很好用。我使用此代码执行此操作：

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

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

Answer 1

注意：在接受此答案时，此方法有效。延迟加载插件已更改，现在已损坏。我不能不接受答案，也不能删除它。

还有另一个问答，建议将其作为AJAX请求的一部分处理，以负责插入其他DOM：

Binding image lazy loading to new images inserted after ajax request

但是，这就是我的做法：

$(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插件，则有2个选项：

第一：（由于性能下降，不建议使用）

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

但是请注意这里的“ #container”，它是容器的选择器，您将在其中显示新加载的内容，因此上面的代码将在该容器内侦听任何新添加的内容，以在新图像上再次运行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()：

Answer 5

我有同样的问题，当使用带有懒惰负载图像的航点无限滚动时。 （但不适用于ajax内容）。

Answer 6

对于我的方案，当页面加载时，我将获得带有模板ID的模板列表。基于该模板ID，我使用jQuery Lazy使用ajax加载base64编码的图像并在页面上延迟加载图像。

Answer 7

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

Answer 8

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

      });