1

How can I delay the loading of an iFrame? The iFrame (at bottom of page) is:

  • A) Slowing the site load time
  • B) Conflicting with slider (see my other question re: slider)

To delay the iframe load until after DOM ready I'm trying:

<iframe id="iframe_id" src="http://sourcewebsite.com" style="width:100%;height:700px;border:0px;background-color:;" frameborder="0" allowtransparency="true"></iframe>


<script type='text/javascript'> $(document).ready(function(){ $('iframe#iframe_id').attr('src', 'http://sourcewebsite.com'); }); </script>

I'm assuming this takes http://sourcewebsite.com and passes it to 'src' and loads it into the iframe with the id #iframe_id after DOM is ready

However chrome developer console is telling me:

"Uncaught ReferenceError: $ is not defined"

.

At the moment I'm thinking (window).load my be a better method as it would load the iframe after the slider.. eg:

<iframe id="iframe_id" src="http://sourcewebsite.com"..........></iframe>

$(window).load(function() { $('iframe#iframe_id').attr('src', 'http://sourcewebsite.com'); });

But I'm not sure if this is syntax is correct (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!

Thanks for any tips!

EDIT - Re: scripts:

!-- JAVASCRIPT FILES PLACED AT THE BOTTOM TO REDUCE THE LOADING TIME -->
<!-- CORE JQUERY -->
<script src="assets/js/jquery-1.11.1.js"></script>
<!-- BOOTSTRAP SCRIPTS -->
<script src="assets/js/bootstrap.js"></script>
<!-- EASING SCROLL SCRIPTS PLUGIN 
<script src="assets/js/vegas/jquery.vegas.min.js"></script>
<!-- VEGAS SLIDESHOW SCRIPTS -->
<script src="assets/js/jquery.easing.min.js"></script>
<!-- FANCYBOX PLUGIN -->
<script src="assets/js/source/jquery.fancybox.js"></script>
<!-- ISOTOPE SCRIPTS -->
<script src="assets/js/jquery.isotope.js"></script>
<!-- VIEWPORT ANIMATION SCRIPTS   -->
<script src="assets/js/appear.min.js"></script>
<script src="assets/js/animations.min.js"></script>
<!-- CUSTOM SCRIPTS -->
<script src="assets/js/custom.js"></script>
headNumber2
  • 13
  • 1
  • 6
  • `$` not defined - jQuery reference not included. – Shaunak D May 03 '15 at 04:40
  • Thanks. According to: http://stackoverflow.com/questions/2194992/jquery-is-not-defined That error can only be caused by one of three things: (1) Your JavaScript file is not being properly loaded into your page (2)You have a botched version of jQuery. This could happen because someone edited the core file, or a plugin may have overwritten the $ variable. (3) You have JavaScript running before the page is fully loaded, and as such, before jQuery is fully loaded.--- Perhaps the jquery slider is using $ – headNumber2 May 03 '15 at 04:48

1 Answers1

0

The code <script type='text/javascript'> $(document).ready(function(){ $('iframe#iframe_id').attr('src', 'http://sourcewebsite.com'); }); </script> references the jQuery $ object imedatly, (it will execute the callback after the DOM is ready). If this code appears before your <script src="assets/js/jquery-1.11.1.js"></script> then it will execute without knowing what $ is, you should move it below your reference to jQuery.

Jason Sperske
  • 29,816
  • 8
  • 73
  • 124
  • Thank you Jason! Moving the script to the bottom of the body worked! I definitely tried that before but you can't argue with results, DOM loaded in half a second, instead of several seconds! Thanks again Jason. Hopefully some people can upvote your reply because my rep wont allow it. I now just need to solve the issue of the invisible iframe that is due the the jquery slider: Different issue though: http://stackoverflow.com/questions/30009667/jquery-slider-hiding-iframe-script-priority-conflict – headNumber2 May 03 '15 at 14:12