9

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

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

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

4

8 回答 8

5

很快，最好的优化方法是在你的 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”，它是容器的选择器，您将在其中显示新加载的内容，因此上面的代码将在此容器内侦听任何新添加的内容，以便在新图像上再次运行延迟加载，

第二：（推荐）

通过将其添加到您的 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();
    }
});
于 2013-06-03T17:28:20.287 回答
2

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

还有另一个问答建议将其作为负责插入附加 DOM 的 AJAX 请求的一部分进行处理：

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

但是，这就是我的做法：

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

演示：jsfiddle

于 2012-12-09T21:09:23.110 回答
1

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

于 2013-04-13T17:16:01.877 回答
1

除了 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);

                }
            });
        }

诺塔贝尼

于 2014-10-20T21:03:26.383 回答
0

我有同样的问题，当使用带有延迟加载图像的航点无限滚动时。（但不适用于 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我在事件上绑定了延迟加载配置。

于 2015-07-05T19:55:34.157 回答
0

对于我在加载页面时的场景，我将获得带有模板 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>

于 2020-04-29T22:47:03.490 回答
-2

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

$(document).on('ajaxStop', function() {
   $("img.lazy").lazyload({
        effect: 'fadeIn'
    });
});
于 2012-12-10T20:57:28.840 回答
-2 
   $(document).ajaxStop(function() {$('.loading').removeClass('in');
    $("img.lazy").lazyload({
                effect: "fadeIn",
               container: $("#scrollable"),
               threshold: 100,
            })

      });

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

于 2013-04-07T04:46:42.073 回答