推遲與jQuery的問題和版本的JavaScript

Question

我遇到一些問題，推遲JavaScript。從Google's docs約defering JS，我發現下面的代碼，編輯我的需求：

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

該代碼添加3個.js文件的頁面，他們在檢查中顯示。現在的問題是，我有更多的代碼我的網頁上，使用jQuery &的谷歌分析

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

現在，我已經把我所有的代碼放到//some code部分，所以代碼初始化的fancybox並添加事件偵聽器。現在我得到的一個問題是刷新時，有時我得到Uncaught ReferenceError: jQuery is not defined。我只能假設這是因爲其他文件在jQuery文件之前加載。我應該如何解決這個問題？

此外，main.js（頁面上需要的所有其他js代碼的.js文件）中的代碼是否仍然需要在$(document).ready(function(){...});之內？ 我曾經在我的代碼之間放置了大量的javascript，所以如果不需要將它發送到頁面，但我想用外部.js文件可能會因爲可以緩存而受益。

而且在旁註：apparantly使用bar.js?v=1.0爲版本是BAD（根據薩爾瓦多goog，因爲當時一些代理的不要緩存它），所以最好的方法是經常改變的文件名，例如： bar.1.0.js？當你調用「$（文件）。就緒（函數（）{」，因爲它沒有包括在本頁面可以解決未加載

Answer 1

jQuery的，但裝在頁面加載後。

通過jQuery的文件加載完成後執行的所有代碼：

<script type='text/javascript'> 
var element = document.createElement("script"); 
function downloadJSAtOnload() { 
    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> 

<script type="text/javascript"> 
// Quick and dirty implementation, you should check for all the included files to be done loading, and create some sort of object that triggers an event that is called when alle the files are loaded 
element.onload = function { 
    $(document).ready(function() { ... }); 
} 
</script> 

[編輯]：jQuery的依賴文件的jQuery之前加載：你必須採用相同的方法，並創建後的其他文件的腳本對象jQuery腳本onload事件觸發了，你確實不應該再使用$（document）.ready（）了，因爲這些文件包含在onload中， 。

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

    element.onload = function() { 
     /jQuery is ready, now load the files that build on the jQuery framework 
     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>