jQuery的等到AJAX页面完全加载 [英] jQuery wait till AJAX page is fully loaded

问题描述

我使用AJAX来第一个显示网页B的内容。

我

如何让jQuery的等待一切负荷（文字，图片等）显示内容之前？

  $。阿贾克斯（{
    网址：pageB.html
    beforeSend：函数（）{
        //显示加载动画这里
    }
    成功：功能（数据）{
        //隐藏加载动画这里
        $（机构）追加（数据）;
    }
}）;
 

我用beforeSend显示一个加载动画时给用户的AJAX请求正在处理中。现在，我想扩展的等待时间，使加载动画不会消失，直到加载所有图像。

我想最初隐藏附加数据，等待所有的图像加载，然后显示的内容 -   $（机构）。在（加载，这里的图像类，函数（）{//显示的内容}）在成功，但事件似乎并不火。

任何想法？

更新：

更新code：

  $。阿贾克斯（{
    网址：pageB.html
    beforeSend：函数（）{
        //显示加载动画这里
    }
    成功：功能（数据）{
        //隐藏加载动画这里
        $（机构）追加（数据）;
        $（机构）对（的onload，IMG，函数（）{//显示内容}）。
    }
}）;
 

解决方案

您将不得不使用直接事件绑定：

  $（身体IMG）上（负荷，函数（）{}）。
$（身在图像配级）上（负荷，函数（）{}）。
 

而不是委托绑定：

  $（机构）上（负载，IMG，函数（）{}）。
$（机构）上（负载，在图像配级，函数（）{}）。
 

委派绑定依赖于事件冒泡，这并不是每一个事件一样。它似乎在加载事件 - 至少，从＆LT; IMG＆GT; - 是一个不

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

I use AJAX to display content of page B on page A.

How can I make jQuery wait for everything to load (text, images etc.) before the content is displayed?

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

I use beforeSend to show a loading animation to the user when the AJAX request is being processed. Now I want to "extend" the waiting time so that the loading animation does not disappear until all images are loaded.

I tried to initially hide appended data, wait for all images to load and then show content - $("body").on("load", "images class here", function() {//show content}) inside success but the event does not appear to fire.

Any ideas?

UPDATE:

Updated code:

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

解决方案

You'll have to use direct event binding:

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

Rather than delegated binding:

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

Delegated bindings depend on the event bubbling, which not every event does. And it seems the "load" event -- at least, from an <img> -- is one that doesn't.

Example: http://jsfiddle.net/DLy6j/

这篇关于jQuery的等到AJAX页面完全加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！