小编典典

jQuery等到AJAX页面完全加载

ajax

我使用AJAX在页面A上显示页面B的内容。

如何在内容显示之前让jQuery等待所有内容加载(文本,图像等)?

$.ajax({
    url:"pageB.html",
    beforeSend: function() {
        //show loading animation here
    }
    success: function(data) {
        //hide loading animation here
        $("body").append(data);
    }
});

当处理AJAX请求时,我使用beforeSend向用户显示加载动画。现在,我想“延长”等待时间,以便在加载所有图像之前加载动画不会消失。

我最初尝试隐藏附加数据,等待所有图像加载,然后显示内容- $("body").on("load", "images class here", function() {//show content})内部success但事件似乎没有触发。

有任何想法吗?

更新:

更新的代码:

$.ajax({
    url:"pageB.html",
    beforeSend: function() {
        //show loading animation here
    }
    success: function(data) {
        //hide loading animation here
        $("body").append(data);
        $("body").on("onload", "img", function() {//display content});
    }
});

阅读 231

收藏
2020-07-26

共1个答案

小编典典

您必须使用直接事件绑定:

$("body img").on("load", function () { });
$("body .image-class").on("load", function () { });

而不是委托绑定:

$("body").on("load", "img", function() { });
$("body").on("load", ".image-class", function () { });

委托绑定取决于事件冒泡,并非每个事件都如此。看来"load",至少从某起事件而言,该事件<img>并非如此。

示例:http//jsfiddle.net/DLy6j/

2020-07-26