jQuery 检测页面是否加载完成

Detect if page has finished loading

提问by Cameron

Is there a way to detect when a page has finished loading ie all its content, javascript and assets like css and images?

有没有办法检测页面何时完成加载，即它的所有内容、javascript 以及 css 和图像等资产？

so like:

像这样：

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

and also additionally if the page has been loading for more than 1 min then do something else such as:

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

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

I've seen websites like Apple's MobileMe do similar checks but haven't been able to figure it out in their huge code libraries.

我见过像 Apple 的 MobileMe 这样的网站进行了类似的检查，但无法在其庞大的代码库中弄清楚。

Can anyone help?

任何人都可以帮忙吗？

Thanks

谢谢

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

回答by TJ.

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/

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

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

另请参阅http://api.jquery.com/load-event/以获取有关 jQuery(window).load 的说明。

Update

更新

A detailed explanation on how javascript loading works and the two events DOMContentLoadedand OnLoadcan be found on this page.

可以在此页面上找到有关javascript 加载如何工作以及两个事件DOMContentLoaded和OnLoad的详细说明。

DOMContentLoaded: When the DOM is readyto be manipulated. jQuery's way of capturing this event is with jQuery(document).ready(function () {});.

DOMContentLoaded：当DOM 准备好被操纵时。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.

OnLoad：当DOM 准备好并且所有资产（包括图像、iframe、字体等）都已加载并且纺车/小时类消失时。jQuery 捕获这个事件的方式就是上面提到的jQuery(window).load。

回答by samccone

there are two ways to do this in jquery depending what you are looking for..

有两种方法可以在 jquery 中执行此操作，具体取决于您要查找的内容..

using jquery you can do

使用 jquery 你可以做

• //this will wait for the text assets to be loaded before calling this (the dom.. css.. js)

  $(document).ready(function(){...});
  

• //this will wait for all the images and text assets to finish loading before executing

  $(window).load(function(){...});
  

• //这将在调用此之前等待加载文本资产（dom..css..js）

  $(document).ready(function(){...});
  

• //这将在执行之前等待所有图像和文本资产完成加载

  $(window).load(function(){...});
  

回答by Nemanja

That's called onload. DOM ready was actually created for the exact reason that onload waited on images. ( Answer taken from Matchuon a simmilar question a while ago. )

这就是所谓的加载。DOM 就绪实际上是出于 onload 等待图像的确切原因而创建的。（前一段时间从Matchu的一个类似问题中得到的答案。）

window.onload = function () { alert("It's loaded!") }

onload waits for all resources that are part of the document.

onload 等待属于文档的所有资源。

Link to a question where he explained it all:

链接到一个问题，他解释了这一切：

Click me, you know you want to!

点击我，你知道你想要！

回答by qwertymk

I think the easiest way would be

我认为最简单的方法是

var items = $('img, style, ...'), itemslen = items.length;

items.bind('load', function(){ 
    itemslen--;
    if (!itemlen) // Do stuff here
});

EDIT, to be a little crazy:

编辑，有点疯狂：

var items = $('a, abbr, acronym, address, applet, area, audio, b, base, ' + 
    'basefont, bdo, bgsound, big, body, blockquote, br, button, canvas, ' + 
    'caption, center, cite, code, col, colgroup, comment, custom, dd, del, ' +
    'dfn, dir, div, dl, document, dt, em, embed, fieldset, font, form, frame, ' +
    'frameset, head, hn, hr, html, i, iframe, img, input, ins, isindex, kbd, ' +
    'label, legend, li, link, listing, map, marquee, media, menu, meta, ' +
    'nextid, nobr, noframes, noscript, object, ol, optgroup, option, p, ' +
    'param, plaintext, pre, q, rt, ruby, s, samp, script, select, small, ' + 
    'source, span, strike, strong, style, sub, sup, table, tbody, td, ' + 
    'textarea, tfoot, th, thead, title, tr, tt, u, ul, var, wbr, video, ' + 
    'window, xmp'), itemslen = items.length;

items.bind('load', function(){ 
    itemslen--;
    if (!itemlen) // Do stuff here
});

回答by Rohan Kumar

Another option you can check the document.readyStatelike,

您可以检查document.readyState 的另一个选项，例如，

var chkReadyState = setInterval(function() {
    if (document.readyState == "complete") {
        // clear the interval
        clearInterval(chkReadyState);
        // finally your page is loaded.
    }
}, 100);

From the documentation of readyState Page the summary of complete state is

从 readyState 页面的文档中，完整状态的摘要是

Returns "loading" while the document is loading, "interactive" once it is finished parsing but still loading sub-resources, and "complete" once it has loaded.

在加载文档时返回“正在加载”，在完成解析但仍在加载子资源后返回“交互”，并在加载后返回“完成”。

回答by Danial

var pageLoaded=0;

$(document).ready(function(){
   pageLoaded=1;
});

Using jquery: https://learn.jquery.com/using-jquery-core/document-ready/

使用 jquery：https: //learn.jquery.com/using-jquery-core/document-ready/

回答by Cth103

Without jquery or anything like that beacuse why not ?

没有 jquery 或类似的东西，因为为什么不呢？

var loaded=0;
var loaded1min=0;
document.addEventListener("DOMContentLoaded", function(event) {
   loaded=1;
    setTimeout(function () {
      loaded1min=1;
    }, 60000);
});

回答by yoozer8

One option is to have the page be blank, containing a small amount of javascript. Use the script to make an AJAX call to get the actual page content, and have the success function write the result over the current document. In the timeout function you can "do something else amazing"

一种选择是让页面空白，包含少量 javascript。使用脚本进行 AJAX 调用以获取实际页面内容，并让成功函数将结果写入当前文档。在超时功能中，您可以“做一些其他令人惊奇的事情”

Approximate pseudocode:

近似伪代码：

$(document).ready(function(){
    $.ajax
      url of actual page
      success:do something amazing
      timeout: do something else
});

回答by John Smith

Is this what you had in mind?

这是你想到的吗？

$("document").ready( function() {
    // do your stuff
}

回答by Cameron

FYI of people that have asked in the comments, this is what I actually used in projects:

在评论中询问的人仅供参考，这是我在项目中实际使用的：

function onLoad(loading, loaded) {
    if(document.readyState === 'complete'){
        return loaded();
    }
    loading();
    if (window.addEventListener) {
        window.addEventListener('load', loaded, false);
    }
    else if (window.attachEvent) {
        window.attachEvent('onload', loaded);
    }
};

onLoad(function(){
   console.log('I am waiting for the page to be loaded');
},
function(){
    console.log('The page is loaded');
});