Jquery 延迟加载与 ajax

Question

我在我的电子商务网站上使用lazyload()。惰性加载()效果很好。我使用这段代码来做到这一点:

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

还有一些过滤器，如颜色、价格等，运行 ajax 并显示新结果。当新结果出现时，lazyload() 不起作用。我知道我必须将lazyload() 与live()、delegate() 或on() 一起使用。但我是 jquery 的新手，我无法做到这一点。有人可以帮我吗？我的jquery版本是1.7.2，我们可以使用on()。

Answer 1

简单来说，执行此操作的最佳优化方法是在 ajax 的 success 函数中调用延迟加载:

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

<小时/>

但是，如果您想集中调用到延迟加载插件，您有2 个选项:

第一:(由于性能受到影响，不推荐)

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

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

第二:(推荐)

通过将自定义延迟加载添加到 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();
    }
});