Javascript 如何将jQuery与AJAX结合使用？

我正在使用逐步加载页面中的图像。当使用AJAX调用图像时，它们不会加载。请问，如何将此插件与AJAX结合使用

我试过：

$(function() {
    $('.lazy').lazy({
      placeholder: "data:image/gif;base64,R0lGODlhEALAPQAPzl5uLr9Nrl8e7...",
      effect: "fadeIn",
      effectTime: 2000,
      threshold: 0
    });
});

但是它不起作用。很久以前，当我在Colorbox遇到挑战时，解决方案是调用

body click

，比如：

$("body").on("click", ".photos", function(event){
    $(".photos").colorbox({rel:'photos', transition:"fade"});
});

这使得colorbox能够与AJAX调用一起工作，但是对于Lazy，没有

主体单击

，因此即使我这样做了：

$(function() {
    $('body .lazy').lazy({
      placeholder: "data:image/gif;base64,R0lGODlhEALAPQAPzl5uLr9Nrl8e7...",
      effect: "fadeIn",
      effectTime: 2000,
      threshold: 0
    });
});

---

那么，如何在AJAX中使用jQuery Lazy？

请思考jQuery（和Lazy）是如何工作的。没有自动检测新元素的方法（除非有人自己构建）。因此，如果通过AJAX加载新元素，则需要告诉jQuery/Lazy有新元素

在Lazy的情况下，您可以使用一些实例。在您的情况下，您需要使用

addItems

和

update

使用

addItems

，可以将新元素添加到Lazy的现有实例中。所以插件知道他也必须处理这些元素。使用

update

，您可以强制Lazy对当前视口执行单个更新，而无需使用

滚动

或

调整大小

事件

因此，这意味着您必须稍微更新代码：

var instance = $('.lazy').lazy({
    chainable: false, // tell lazy to return its own instance
    placeholder: "data:image/gif;base64,R0lGODlhEALAPQAPzl5uLr9Nrl8e7...",
    effect: "fadeIn",
    effectTime: 2000,
    threshold: 0
});

之后，在AJAX请求完成后，您需要使用上面提到的两个公共函数。我不知道如何加载新元素，但可能会有一个回调或一些可以执行这些元素的东西

instance.addItems('.jquery-selector-for-new-items-only');
instance.update();

如果新元素已经作为jQuery对象存在，那么也可以对它们使用

addItems

。因此，不使用选择器，只需添加对象：

instance.addItems($('.jquery-object'));
instance.update();

---

就是这样…

不太清楚“使用AJAX调用图像时”是什么意思-您是从AJAX方法调用

.lazy

？你是通过ajax添加图像吗？哇。我希望我能在这上面加上几个加一。谢谢。以下内容适用于我

instance.addItems（'.lazy'）；update（）。如果有人面临同样的问题，只需在脚本中添加这一行即可。很高兴我能帮助你！另一个提示：在“addItems”调用中，最好使用比
.lazy
更精确的选择器。因为有了这个选择器，您将在每个AJAX请求上一次又一次地使用类
lazy
添加所有元素。如果你有一个像样的选择器，只选择新元素就更好了。如果您再次添加相同的项，Lazy会尽力小心，但是如果您只是一个更好的选择器，性能会更好，如果可能的话@马诺夫戈德