我在我的电子商务网站上使用了lazyload()。 lazyload()效果很好。 我使用以下代码来实现：
$(function(){
$("img.lazy").lazyload({
effect : "fadeIn"
});
});
此外，还有一些过滤器，例如颜色、价格等，这些过滤器会运行ajax并显示新结果。当新结果出现时，lazyload()将无法正常工作。我知道我必须使用lazyload()与live()、delegate()或on()一起使用。但我是一个jquery的新手，我无法做到这一点。请问有人可以帮助我吗？我的jquery版本是1.7.2，我们可以使用on()。
简单来说，最优化的方法是在你的ajax成功后调用懒加载函数：call the lazyload in your ajax's success
$.ajax({
url: "your url here",
type: "Post",
success: function(response){
// handle your success callback here
$("img.lazy").lazyload({
effect : "fadeIn"
});
}
});
但是，如果您想将懒加载插件的调用集中管理，则有两个选项：
第一种方法：（不建议使用，因为会影响性能）
$(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插入而运行，这肯定会影响性能。 - AbdelHady注意：在接受此答案时，它是有效的。懒加载插件已更改，现在已失效。我无法取消接受答案，也无法删除它。
还有另一个问答建议将其作为负责插入其他DOM的AJAX请求的一部分来处理：
但是，这是我会这样做的方式：
$(document).on('DOMNodeInserted', 'img.lazy', function() {
$(this).lazyload({
effect: 'fadeIn'
});
});
on。我已经更新了我的答案，并提供了一个使用 DOMNodeInserted 插入事件的示例。我认为这样更清晰，因为它将其与通过 AJAX 加载数据的关注点分离开来。 - Cymen$(document).on('ajaxStop', 'img.lazy', function() { $(this).lazyload({effect: 'fadeIn' }); }); 但我认为在性能方面并没有太大关系。 - Cymenwhen()这种方式： $.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
$(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>我遇到了同样的问题，当使用路点无限滚动和懒加载图片时（但不适用于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事件上绑定了延迟加载配置。
我使用下面的代码，它有效：
$(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图片。但是，默认情况下不显示第一张图片。更新未被触发。