Delay load of iframe?

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.

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; }

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