Delay load of iframe?

0 votes
asked Oct 19, 2009 by sean

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!

7 Answers

0 votes
answered Oct 19, 2009 by tzury-bar-yochay

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

0 votes
answered Oct 19, 2009 by devio

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

0 votes
answered Oct 19, 2009 by crosenblum

Or my favorite use

setTimeout('your app', 6000)

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

0 votes
answered Oct 21, 2010 by ian-r

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(); 
});
0 votes
answered Oct 30, 2013 by djangofan

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>
0 votes
answered Oct 11, 2014 by user956584

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

iframe defer src="//player.vimeo.com/video/89455262"
0 votes
answered Sep 15, 2017 by amir-hosseinzadeh

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>
Welcome to Q&A, where you can ask questions and receive answers from other members of the community.
Website Online Counter

...