Detect if page has finished loading

Question

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

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:

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.

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

Answer 1

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.

Answer 2

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