jQuery LazyLoad 用于从 Ajax 加载新图像

Question

我有这个代码适用于第一次加载的图像：

<script>
    $( document ).ready(function() {
        $("img.lazy").lazyload({
            effect : "fadeIn",
            threshold : 200
        });
    });
</script>

但对于从 AJAX 加载的新图像，它不起作用。我通过使用事件委托来阅读，它可以应用于新加载的图像。

https://learn.jquery.com/events/event-delegation/

但是当我尝试将代码更改为：

<script>
    $( document ).ready(function() {
        $("img.lazy").lazyload( function(event) {
            effect : "fadeIn",
            threshold : 200
        });
    });
</script>

它使所有延迟加载不再起作用。在这种情况下如何正确附加事件委托？谢谢。

Answer 1

您可以使用jQuery 全局 Ajax 事件处理程序 .ajaxSuccess()。

该函数将在 Ajax 请求成功完成时执行。

尝试这样的操作，假设您的 AJAX 响应是纯 HTML。.lazy该代码搜索响应中包含该类的所有图像，并将lazyload()函数绑定到它们。

$(document).ajaxSuccess(function(event, xhr, settings ) {

    // the response in stored in `xhr.responseText`
    $(xhr.responseText).find('img.lazy').lazyload({
        effect : "fadeIn",
        threshold : 200
    });

});

您可以在这里阅读有关全局 Ajax 事件处理程序的更多信息： https://api.jquery.com/category/ajax/global-ajax-event-handlers/