title: load iframe after DOM ready. document ready
body: <p>How can I delay the loading of an iFrame? The iFrame (at bottom of page) is:</p>
  
  <ul>
  <li>A) Slowing the site load time</li>
  <li>B) Conflicting with slider (see my other question re: slider)</li>
  </ul>
  
  <p>To delay the iframe load until after DOM ready I'm trying:</p>
  
  <pre><code>&lt;iframe id="iframe_id" src="http://sourcewebsite.com" style="width:100%;height:700px;border:0px;background-color:;" frameborder="0" allowtransparency="true"&gt;&lt;/iframe&gt;
  
  
  &lt;script type='text/javascript'&gt; $(document).ready(function(){ $('iframe#iframe_id').attr('src', 'http://sourcewebsite.com'); }); &lt;/script&gt;
  </code></pre>
  
  <p>I'm assuming this takes <a href="http://sourcewebsite.com" rel="nofollow">http://sourcewebsite.com</a> and passes it to 'src' and loads it into the iframe with the id #iframe_id <strong>after DOM is ready</strong></p>
  
  <p>However chrome developer console is telling me:</p>
  
  <blockquote>
    <p>"Uncaught ReferenceError: $ is not defined"</p>
  </blockquote>
  
  <p>.</p>
  
  <p>At the moment I'm thinking (window).load my be a better method as it would load the iframe after the slider..
  eg:</p>
  
  <pre><code>&lt;iframe id="iframe_id" src="http://sourcewebsite.com"..........&gt;&lt;/iframe&gt;
  
  $(window).load(function() { $('iframe#iframe_id').attr('src', 'http://sourcewebsite.com'); });
  </code></pre>
  
  <p><strong>But I'm not sure if this is syntax is correct</strong> (especially the url in the script and iframe#iframe instead of just #iframe) Please free to let me know if there are any mistakes! Judging by how things are going I'm sure there are!</p>
  
  <p>Thanks for any tips!</p>
  
  <p>EDIT - Re: scripts:</p>
  
  <pre><code>!-- JAVASCRIPT FILES PLACED AT THE BOTTOM TO REDUCE THE LOADING TIME --&gt;
  &lt;!-- CORE JQUERY --&gt;
  &lt;script src="assets/js/jquery-1.11.1.js"&gt;&lt;/script&gt;
  &lt;!-- BOOTSTRAP SCRIPTS --&gt;
  &lt;script src="assets/js/bootstrap.js"&gt;&lt;/script&gt;
  &lt;!-- EASING SCROLL SCRIPTS PLUGIN 
  &lt;script src="assets/js/vegas/jquery.vegas.min.js"&gt;&lt;/script&gt;
  &lt;!-- VEGAS SLIDESHOW SCRIPTS --&gt;
  &lt;script src="assets/js/jquery.easing.min.js"&gt;&lt;/script&gt;
  &lt;!-- FANCYBOX PLUGIN --&gt;
  &lt;script src="assets/js/source/jquery.fancybox.js"&gt;&lt;/script&gt;
  &lt;!-- ISOTOPE SCRIPTS --&gt;
  &lt;script src="assets/js/jquery.isotope.js"&gt;&lt;/script&gt;
  &lt;!-- VIEWPORT ANIMATION SCRIPTS   --&gt;
  &lt;script src="assets/js/appear.min.js"&gt;&lt;/script&gt;
  &lt;script src="assets/js/animations.min.js"&gt;&lt;/script&gt;
  &lt;!-- CUSTOM SCRIPTS --&gt;
  &lt;script src="assets/js/custom.js"&gt;&lt;/script&gt;
  </code></pre>