Question

我正在使用jQuery Lazy逐步加载页面中的图片。使用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没有body click，所以即使我这样做了：

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

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

Answer 1

请考虑jQuery（和Lazy ）的工作原理。新元素没有自动检测（期望某人自己构建）。所以，如果你通过AJAX加载新元素，你需要告诉jQuery / Lazy有新的元素。

在Lazy的情况下，您可以使用一些public functions实例。在您的情况下，您需要使用addItems和update。

使用addItems，您可以向现有的Lazy实例添加新元素。所以插件知道他也必须处理这些元素。使用update，您可以强制Lazy对当前视口执行单次更新，而不使用scroll或resize事件。

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

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中使用jQuery Lazy？

1 个答案: