jQuery等待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); } });
我使用beforeSend在处理AJAX请求时向用户显示加载动画。 现在我想“延长”等待时间,以便在加载所有图像之前加载动画不会消失。
我试图最初隐藏附加数据,等待所有图像加载然后显示内容 – $("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}); } });
您必须使用直接事件绑定:
$("body img").on("load", function () { }); $("body .image-class").on("load", function () { });
而不是委托绑定:
$("body").on("load", "img", function() { }); $("body").on("load", ".image-class", function () { });
委托绑定取决于事件冒泡,而不是每个事件都有。 似乎"load"
事件 – 至少来自 – 是一个没有。
示例: http : //jsfiddle.net/DLy6j/
如果是图像,则需要捕获所有图像的onload事件。 因此,一旦获得成功回调,找到所有图像,添加“ onload ”事件,并在加载所有图像后进行计算。