CODEWITHSUNDEEP
javascriptjquery
Cinnamon
Cinnamon

Reputation: 1698

Find out when all content has really finished loading

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

Upvotes: 5

Views: 1020

Answers (2)

vonsko
vonsko

Reputation: 395

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

Upvotes: 1

Adam Merrifield
Adam Merrifield

Reputation: 10407

Inside the iframe just use and make the function in the toplevel page.

$(function(){
    parent.function();
});

Upvotes: 0

Related Questions