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 fini

Answer 1

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 2

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 3

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

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

Answer 4

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>