Delay load of iframe?

Question

I know there are some tools and techniques for delaying the load of javascript, but I have an iframe that I would like to delay loading until after the rest of the page has finished downloading and rendering (the iframe is in a hidden that will not be revealed until someone clicks on a particular tab on the page. Is there a way to delay the load of an iframe? Any suggestions would be much appreciated. Thanks!

Answer 1

with jquery it is easy!

either enclose your code which loads the iframe within a $() or use $(document).ready(function(){}) these both are the same and would execute your code after the DOM is ready!

e.g.

$(document).ready(function(){
    $('iframe#iframe_id').attr('src', 'iframe_url');    
});

see more at http://www.learningjquery.com/2006/09/introducing-document-ready

Answer 2

Don't know if need do run without javascript. But the best method is to change the src direct after the iframe:

<iframe id="myIframe" src="http://.." />
<script type="text/javascript">
  var iframe = document.getElementById('myIframe').src = iframe.src;
  iframe.src = '';
  document.onload =  function(){iframe.src = src;}
</script>

Using $(document).ready will start the rendering of your Iframe direct after the DOM Tree is build, but before all of the content in your side is loaded, so I think this isn't what you want.

jquery has the event .load, which is same as onload (after all resources are loaded)

$(window).load(function(){  iframe.src = src; }

Answer 3

Use Javascript in the onLoad event, or in the button click handler, to set the src attribute of the iframe.

Answer 4

This works for me, but has problems if you change the code at all:

function loadIFrame() {
    window.frames['BodyFrame'].document.location.href = "iframe.html";
}         
function delayedLoad() {
    window.setTimeout(loadIFrame2, 5000);
}

Using:

<iframe src="" onLoad="delayedLoad()"></iframe>

Answer 5

Load iFrame after page has loaded With JQuery and a little html and js

// Javascript
$(window).bind("load", function() {
  $('#dna_video').prepend('<iframe src="//player.vimeo.com/video/86554151" width="680" height="383" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>');
});

<!-- Append JQuery-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- HTML -->
<div id="dna_video"></div>

Answer 6

You can also apply display:none to the iframe with CSS, then use jQuery's .show like this:

$(document).ready(function(){ 
    $('iframe.class_goes_here').show(); 
});

Answer 7

You can use defer attribute when need load last after css, js etc:

iframe defer src="//player.vimeo.com/video/89455262"

Answer 8

window.setTimeout(function(){   
$("#myframe").attr("src","exp3.html");
$("#myframediv").show("slow");
},4000);

try this, this also works.

Answer 9

I don't understand why everyone is confusing JAVASCRIPT with JQUERY, but...

The pure JS solution is below: (basically it waits for the DOM to be built then loads all iframes in your page).

<iframe src="" data-src="YOUR ACTUAL iFRAME URL">
<script type="text/javascript">
      function load_iframes() {
var vidDefer = document.getElementsByTagName('iframe');
for (var i=0; i<vidDefer.length; i++) {
if(vidDefer[i].getAttribute('data-src')) {
vidDefer[i].setAttribute('src',vidDefer[i].getAttribute('data-src'));
} } }
      document.addEventListener("DOMContentLoaded", function(event) {
         load_iframes();
      });
    </script>

Note: Be careful about using the document.load event. Any resource that has a problem or has to spend 1 minute to load will stop your code from executing. This code snippet is tweaked (replaced load by domcontentloaded) from this reference.

Answer 10

Or my favorite use

setTimeout('your app', 6000)

That will make it wait x number of milliseconds to call any function....