Does Body.onload Wait For Iframes?

I know that onload event waits for page resources to load before firing - images, stylesheets, etc. But does this include IFrames inside the page? In other words, is it guaranteed

Solution 1:

No, it doesn't. If you want to do something like that, you'll need to add an onload handler for the iframe. You can do this nicely with jQuery:

<iframesrc="http://digg.com"></iframe><script>var count = $('iframe').length;
    $(function() {
      // alert('loaded'); // will show you when the regular body loads
      $('iframe').load(function() {
        count--;
        if (count == 0)
            alert('all frames loaded');
      });
    });
  </script>

This would alert when all the frames are loaded.

See the example:

http://jsbin.com/azilo

Solution 2:

Or plain javascript should work..

functioncheckIframes() {
   if(!i) { i = 0; }
   if(document.getElementsByTagName('iframe')[i]) {
      document.getElementsByTagName('iframe')[i].onload = function () { i++; checkIframes(); }
   }
   else { yourFunctionInHere(); }
}

haven't really tested this, but should work... than refer to it with document.onload = function() { checkIframes(); }

I don't really like libraries like jQuery, because so far I found I can achieve more with less code, with regular javascript.

Solution 3:

As I see on my pages, each iframe got independent onload, and top-frame onload doesn't wait for iframes to fire.

I got gif/png banners on my site that sometimes loads very slowly, so I put them into iframe and that made whole site and onload event to work faster.