检测页面是否已完成加载

小开

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"

Approximate pseudocode:

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

小开

Is this what you had in mind?

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

小开

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

using jquery you can do

//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(){...});
```

小开

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

小开

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

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

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

Link to a question where he explained it all:

Click me, you know you want to!

小开

最佳答案

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.

小开

Another option you can check the document.readyState like,

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

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

小开

var pageLoaded=0;


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

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

小开

Without jquery or anything like that beacuse why not ?

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

小开

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