Jquery 检测页面是否已完成加载

发布于08月17日

有没有办法检测一个页面何时加载完毕，即它的所有内容、javascript以及CSS和图像之类的assets资源？

so like:

if(PAGE HAS FINISHED LOADING)
{
// do something amazing
}

此外，如果页面加载时间超过1分钟，则执行其他操作，如:

if(PAGE HAS BEEN LOADING FOR 1 MIN)
{
// do something else amazing
}

我看到像苹果的MobileMe这样的网站也做过类似的判断，但在他们庞大的代码库中还没有找到答案.

Can anyone help?

谢谢

EDIT: This is essentially what I want to do:

// hide content
$("#hide").hide();

// hide loading
$("#loading").hide();

// fade in loading animation
setTimeout($('#loading').fadeIn(), 200);

jQuery(window).load(function() {
  $("#hide").fadeIn();

  $("#loading").fadeOut(function() {
    $(this).remove();
    clearInterval(loadingAnim);
  });

  setTimeout(function() {
    $("#error").fadeIn();
  }, 60000);
});

推荐答案

jQuery(window).load(function () {
    alert('page is loaded');

    setTimeout(function () {
        alert('page is loaded and 1 minute has passed');   
    }, 60000);

});

还是http://jsfiddle.net/tangibleJ/fLLrs/1/

See also http://api.jquery.com/load-event/ for an explanation on the jQuery(window).load.

Update

关于javascript加载工作原理以及DOMContentLoaded和OnLoad两个事件的详细说明，请参见this page.

DOMContentLoaded:当DOM is ready被操纵时.jQuery捕获此事件的方式是使用jQuery(document).ready(function () {});.

OnLoad: When the DOM is ready and all assets - this includes images, iframe, fonts, etc - have been loaded and the spinning wheel / hour class disappear. jQuery's way of capturing this event is the above mentioned jQuery(window).load.