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

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 4

You can use the loading attribute to lazy load iframes.

<iframe src="https://example.com"
        loading="lazy"
        width="600"
        height="400"></iframe>

Answer 5

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

Answer 6

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 7

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 8

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

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