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);
    }
});

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

我最初尝试隐藏附加数据，等待所有图像加载，然后显示内容 - $("body").on("load", "images class here", function() {//show content}) inside 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});
    }
});

Answer 1

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

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

而不是委托(delegate)绑定(bind):

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

委托(delegate)绑定(bind)取决于事件冒泡，但并非每个事件都如此。看来"load"事件——至少来自 <img> -- 却没有。

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