jQuery等待AJAX​​页面完全加载

Question

我使用AJAX显示第A页的B页内容。

如何在显示内容之前让jQuery等待加载所有内容（文本，图像等）？

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

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

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

有什么想法吗？

更新：

更新的代码：

success

Answer 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> - 不是。{/ p>

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

Answer 2

如果是图像，则需要捕获所有图像的onload事件。 因此，一旦您获得成功回调，找到所有图像，添加“ onload ”事件，并在加载所有图像后进行计算。