Load an iframe asynchronously

akantro_4653 0
Viewed 82214

I have a webpage with an <iframe> pointing to another website. I don't want this to block the loading of the rest of the page. Is there a way to load it asyncrounously?

asynchronous iframe
8 Answers

It shouldn't block. If you want the main page to fully load first (eg, main page's images before iframe content) then you'll have to use a bit of javascript to set the url of the iframe, like <body onload="javascript:...">

user_67220

One problem we had was that while iframes already do load asynchronously, the main page will not fire OnLoad until the iframe has finished loading too.

We worked around this by 'faking' OnLoad by calling the method we wanted in a script element at the bottom of the main page, even outside the closing body tag:

</body>
<script  type='text/jscript' language='javascript'>
BodyOnready();
</script>
user_455630

iframes should load asynchronously without any effort on your part.

user_905270

Although I agree this shouldn't be happening, you could wait for your webpage to be completely loaded, and then load the iframe contents. With jQuery, I think you can do something like this:

  • Supposing your IFRAME looks like: <iframe name="theOtherPage"></iframe>


$(document).ready(function(){
  (window.frames || document.frames)["theOtherPage"].window.location = "http://theotherpage.com/"; 
});

user_2503010
Related