我在电子商务网站上使用lazyload（）。 lazyload（）效果很好。我使用这段代码来做到这一点：
$(function(){
$("img.lazy").lazyload({
effect : "fadeIn"
});
});
还有一些过滤器，如颜色，价格等，运行ajax并显示新的结果。当新结果出现时，lazyload（）不起作用。我知道我必须使用lazyload（）与live（），delegate（）或on（）。但我是jquery的新手，我不能这样做。有人可以帮我吗？我的jquery版本是1.7.2，我们可以使用on（）。
答案 0 :(得分：5)
很快，执行此操作的最佳优化方式是在您的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();
}
});
答案 1 :(得分：1)
注意：在接受此答案时，这有效。延迟加载插件已更改，现在已损坏。我不能不接受答案，也不能删除它。
还有另一个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
答案 2 :(得分：1)
窗口加载后加载的图像的延迟加载（例如AJAX）在滚动事件之前不会显示任何图像。这是因为它在内部硬编码以在窗口加载事件之后触发初始更新。目前所有上述答案都是错误的。
答案 3 :(得分：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);
}
});
}
NOTA BENE
答案 4 :(得分：0)
我有同样的问题，当使用航点无限滚动与延迟加载图像。 （但不适用于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');
});
事件上绑定了延迟加载配置。
答案 5 :(得分：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>
答案 6 :(得分：-2)
我使用下面的代码并且有效：
$(document).on('ajaxStop', function() {
$("img.lazy").lazyload({
effect: 'fadeIn'
});
});
答案 7 :(得分：-2)
$(document).ajaxStop(function() {$('.loading').removeClass('in');
$("img.lazy").lazyload({
effect: "fadeIn",
container: $("#scrollable"),
threshold: 100,
})
});
适用于ajax图像。但是，默认情况下不显示第一个图像。不会触发更新。