我在我的电子商务网站上使用了lazyload()。 lazyload() 效果很好。我使用这段代码来做到这一点：
$(function(){
$("img.lazy").lazyload({
effect : "fadeIn"
});
});
还有一些过滤器，如颜色、价格等，运行 ajax 并显示新结果。当新结果出现时，lazyload() 不起作用。我知道我必须将lazyload() 与live()、delegate() 或on() 一起使用。但我是 jquery 的新手，我做不到。任何人都可以帮助我吗？我的 jquery 版本是 1.7.2，我们可以使用 on()。
【问题讨论】：
标签： jquery ajax lazy-loading
简而言之，最佳优化方式是在您的 ajax 的成功函数中调用延迟加载：
$.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”，它是容器的选择器，您将在其中显示新加载的内容，因此上面的代码将在此容器内侦听任何新添加的内容，以便在新图像上再次运行延迟加载，
第二：（推荐）
通过将自定义延迟加载添加到您的 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();
}
});
【讨论】：
DOMNodeInserted .. 但性能方面，它不会是最好，因为即使更改没有插入新图像，此侦听器也会运行任何 DOM 插入，这肯定会影响性能。
注意：在接受此答案时，此方法有效。延迟加载插件已更改，现在已损坏。我不能不接受答案，也不能删除它。
还有另一个问答建议将其作为负责插入附加 DOM 的 AJAX 请求的一部分进行处理：
Binding image lazy loading to new images inserted after ajax request
但是，我会这样做：
$(document).on('DOMNodeInserted', 'img.lazy', function() {
$(this).lazyload({
effect: 'fadeIn'
});
});
演示：jsfiddle
【讨论】：
on。我已经用DOMNodeInserted 插入事件的示例更新了我的答案。我认为这更简洁，因为它将它与通过 AJAX 加载数据的担忧区分开来。
在窗口加载后加载的图像（例如 AJAX）的延迟加载不会在滚动事件之前显示任何图像。这是因为它在内部进行了硬编码以在窗口加载事件之后触发初始更新。以上所有的答案，目前都是错误的。
【讨论】：
除了 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);
}
});
}
没有好处
【讨论】：
我有同样的问题，当使用带有延迟加载图像的航点无限滚动时。 （但不适用于 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事件上绑定了延迟加载配置。
【讨论】：
对于我在加载页面时的场景，我将获得带有模板 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>【讨论】：
我使用下面的代码，它工作：
$(document).on('ajaxStop', function() {
$("img.lazy").lazyload({
effect: 'fadeIn'
});
});
【讨论】：
$(document).ajaxStop(function() {$('.loading').removeClass('in');
$("img.lazy").lazyload({
effect: "fadeIn",
container: $("#scrollable"),
threshold: 100,
})
});
适用于 ajax 图像。但是，默认情况下不显示第一张图像。更新未触发。
【讨论】：