StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POdefering javascript with jquery issues and versioning
text
Body
copied!<p>I'm having some issues with defering javascript. From <a href="https://developers.google.com/speed/docs/best-practices/payload#DeferLoadingJS" rel="nofollow">Google's docs</a> about defering js, I've found the following code, edited to my needs:</p> <pre><code><script type='text/javascript'> function downloadJSAtOnload() { var element = document.createElement("script"); element.src = "//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"; document.body.appendChild(element); var element2 = document.createElement("script"); element2.src = "jquery.validate.js"; document.body.appendChild(element2); var element3 = document.createElement("script"); element3.src = "fancybox/jquery.fancybox.pack.2.1.4.js"; document.body.appendChild(element3); } if (window.addEventListener) window.addEventListener("load", downloadJSAtOnload, false); else if (window.attachEvent) window.attachEvent("onload", downloadJSAtOnload); else window.onload = downloadJSAtOnload; </script> </code></pre> <p>This code adds the 3 .js files to the page, and they show up in the inspector. Now the issue is that I have more code on my page, using jquery & the google analytics</p> <pre><code><script type='text/javascript'> $(document).ready(function(){ //some code }); var _gaq = _gaq || []; _gaq.push(['_setAccount', '*********']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); </script> </code></pre> <p>Now I have put all my code into the <code>//some code</code> section, so code for initializing the fancybox and adding event listeners. Now an issue I'm getting is when refreshing, sometimes I get <strong><code>Uncaught ReferenceError: jQuery is not defined</code></strong>. I can only assume this is because the <strong>other files are loaded before the jQuery file</strong>. How should I solve this?</p> <p>Also, does code inside the <code>main.js</code> (the .js file with all the other js code required on the page) still need to be in the <code>$(document).ready(function(){...});</code> or not? I used to put a lot of javascript in between my code in php so it wouldn't need to be sent to the page if it isn't needed, but I guess using an external .js file could benefit due to being cachable.</p> <p>And on a sidenote: apparantly using <code>bar.js?v=1.0</code> for <strong>versioning</strong> is BAD (according to El Goog, because then some proxy's don't cache it), so the best method is to always change the file name, like so: <code>bar.1.0.js</code>?</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload