Everything in an IFrame Loaded event

Question

Is there some sort of event for IFrames that only fires when every resource (script, image, stylesheet, dom) has loaded? Basically I want to have a loading graphic displayed over the IFrame and only remove that when everything is loaded inside so the user doesn't see everything loading.

Currently I am using $(iframe).ready(function() { ... }); but this fires very early before anything has loaded.

Answer 1

You are looking for the window.onload event.

window.onload fires if anything (images, iFrames, etc.) was completly loaded, that is why most guys dislike this event pretty much. But in your case, it seems to fit.

$(window).load(function(){
   alert('fired');
});

non-jQuery

window.onload = function(){
   alert('fired');
};