Question

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

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

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

Answer 1

很快，执行此操作的最佳优化方式是在您的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，< / p>

第二名：（推荐）

通过将自定义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 2

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

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

Binding image lazy loading to new images inserted after ajax request

但是，我就是这样做的：

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

演示：jsfiddle

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内容）。

我解决了这个问题：

if (Meteor.isServer) {
    var Coll = new Mongo.Collection('collectionName');
    Meteor.methods({
        sumList: function (filter) {
            var pipeline = [
                {
                    "$match": filter
                },
                {
                    "$group": {
                        "_id": 0,
                        "sumA": { "$sum": "$a" },
                        "sumB": { "$sum": "$b" },
                        "sumC": { "$sum": "$c" }
                    }
                }
            ];          
            var result = Coll.aggregate(pipeline);
            return result[0];
        }
    }); 
}

if (Meteor.isClient) {
    // filters
    var group1 = { "number": { "$lte": 32 } };
    var group2 = { "number": { "$gte": 33, "$lte": 70 } };
    var group3 = { "number": { "$gte": 71 } };

    Meteor.call('sumList', group1, callback);
    //Meteor.call('sumList', group2, callback);
    //Meteor.call('sumList', group3, callback);

    function callback(err, result) {
        console.log(result)
    }
}

我在$("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'); });事件上绑定了延迟加载配置。

Answer 6

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

希望您会对我的方法有所了解

$(document).ready(function() {
  let imageArray = [0, 1, 10, 100, 1000, 1001];

  let parsedImageArray = $.map(imageArray, function(value) {
    return "<div class='lazy' data-loader='ajaxLoader' data-src='/echo/html/' data-method='post' contentId='" + value + "'></div><br>";
  });

  $("#content").html(parsedImageArray);

  console.log("Here" + parsedImageArray)
});


$(document).bind('DOMNodeInserted', function(e) {
  $('.lazy').lazy({
    effect: "fadeIn",
    event: "scrollstop",
    skip_invisible: true,
    removeAttribute: false,
    ajaxLoader: function(element, response) {
      let thumbnailId = element.attr("contentId");
      console.log("Here" + thumbnaiId);
      $.get("https://picsum.photos/id/" + thumbnailId, function(srcValue, status) {
        //for me i have to pull the base64 encode image from my server 
        let defaultImageDom = generateThumbnailImage(tempSrc);
        element.html(defaultImageDom);
        element.removeClass('lazy');
      }).fail(function(jqXHR, textStatus, errorThrown) {
        let defaultImageDom = generateThumbnailImage("");
        element.html(defaultImageDom);
        element.append("<em>Error Getting Thumbnail Preview</em>");
        element.removeClass('lazy');
      });
    },
  });
});

function generateThumbnailImage(srcValue) {
  let defaultImageDom = new Image();
  defaultImageDom.height = 200;
  defaultImageDom.style.borderColor = "#d5d5d5";
  defaultImageDom.style.borderWidth = "1px";
  defaultImageDom.style.borderStyle = "solid";

  if (srcValue && srcValue.length > 0) {
    defaultImageDom.src = srcValue;
  } else {
    //set your fallback image link
    defaultImageDom.src = "data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=";
  }
  return defaultImageDom;
}

.lazy {
  width: 700px;
  height: 467px;
  display: block;
  /* optional way, set loading as background */
  background-image: 'data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=';
  background-repeat: no-repeat;
  background-position: 50% 50%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery.lazy/1.7.9/jquery.lazy.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery.lazy/1.7.9/jquery.lazy.plugins.min.js"></script>

<div id="content">
</div>

Answer 7

我使用下面的代码并且有效：

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

Answer 8

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

      });

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

Jquery lazyload with ajax

8 个答案: