1

我使用 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});
    }
});
4

2 回答 2

4

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

$("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/

于 2012-05-30T21:03:48.147 回答
0

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

于 2012-05-30T19:07:16.990 回答