检测页面是否已完成加载 [英] Detect if page has finished loading

问题描述

有没有一种方法可以检测页面何时完成加载，即页面的所有内容，javascript和诸如CSS和图像之类的资产?

类似:

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

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

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

我已经看到像Apple的MobileMe这样的网站进行了类似的检查，但是还无法在其庞大的代码库中找到答案.

任何人都可以帮忙吗?

谢谢

这实际上是我想要做的:

// 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/

另请参阅 http://api.jquery.com/load-event/ jQuery(window).load的解释.

更新

有关JavaScript加载方式以及两个事件 DOMContentLoaded 和 OnLoad 的详细说明，请参见

解决方案

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

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

});

Or http://jsfiddle.net/tangibleJ/fLLrs/1/

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

Update

A detailed explanation on how javascript loading works and the two events DOMContentLoaded and OnLoad can be found on this page.

DOMContentLoaded: When the DOM is ready to be manipulated. jQuery's way of capturing this event is with 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.

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