Find out when all content has really finished loading

Question

Is there a reliable cross-browser solution to find out when all content on the website has finished loading? As I have a lot of stuff to load (some of which is in iframes), this doesn't really work (the event is fired even though browser's loading indicator is still spinning):

$(window).add('iframe').bind('load').promise().done(function() {
    alert('Too early :(');
});

Answer 1

i am actually using this:

$(window).load(function () {
    // loading done, now perform for example animate/remove loader icon.
});

you can read more about it here:
http://api.jquery.com/load-event/

there is also a warning:

Caveats of the load event when used with images

A common challenge developers attempt to solve using the .load() shortcut is to execute a function when an image (or collection of images) have completely loaded. There are several known caveats with this that should be noted. These are:

It doesn't work consistently nor reliably cross-browser
It doesn't fire correctly in WebKit if the image src is set to the same src as before
It doesn't correctly bubble up the DOM tree
Can cease to fire for images that already live in the browser's cache

i am using it on modern browsers, on both mac/win and did't find any problems so far