jQuery的lazyload阿贾克斯(Jquery lazyload with ajax)

我在我的电子商务网站使用lazyload（）。 lazyload（）的伟大工程。我用这个代码来做到这一点：

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

也有像彩色滤光片一些，价格等，这是运行Ajax和展示新的结果。当新的结果来，lazyload（）不起作用。我知道，我必须使用活（），委托（）或lazyload（）（）。但我对jQuery的新手，我不能这样做。任何人都可以帮助我吗？我的jQuery的版本是1.7.2，我们可以使用（）。

Answer 1:

注：当时这个答案被接受，这个工作。 延迟加载插件改变，现在它被打破了。 我无法取消接受的答案，也没有我可以将其删除。

还有另一种问答这表明处理它作为负责插入附加DOM AJAX请求的一部分：

结合图像迟缓装载到AJAX请求后插入新的图像

然而，这是我会怎么做：

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

演示：的jsfiddle

Answer 2:

不久， 最佳优化的方式来做到这一点是调用lazyload在你的Ajax成功功能：

$.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，

第二：（推荐）

通过将其添加到您的JQuery调用自定义lazyload：

$.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:

滚动事件之前Lazyload为窗口负载（例如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);

                }
            });
        }

请注意

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,
            })

      });

适用于阿贾克斯的图像。但是但是，没有显示默认的第一个图像。更新不会被触发。

文章来源: Jquery lazyload with ajax