JS中window的onload和ready方法的差別

window.onload：所有元素加載完畢才會執行，無需考慮加載的次序

當一個文檔完全下載下傳到浏覽器中時，才會觸發window.onload事件。這意味着頁面上的全部元素對js而言都是可以操作的，也就是說頁面上的所有元素加載完畢才會執行。這種情況對編寫功能性代碼非常有利，因為無需考慮加載的次序。

$(document).ready{ }：HMTL下載下傳完成并解析為DOM樹之後，代碼就會執行

會在DOM完全就緒并可以使用時調用。雖然這也意味着所有元素對腳本而言都是可以通路的，但是，并不意味着所有關聯的檔案都已經下載下傳完畢。換句話說，當HMTL下載下傳完成并解析為DOM樹之後，代碼就會執行。

eg：

假設有一個表現圖庫的頁面，這種頁面中可能會包含許多大型圖像，我們可以通過jQuery隐藏、顯示或以其他方式操作這些圖像。如果我們通過onload頁面設定界面，那麼使用者在能夠使用這個頁面之前，必須要等到每一幅圖像都下載下傳完成。更糟糕的是，如果行為稍微添加給哪些具有預設行為的元素(比如連結)，那麼使用者的互動可能會導緻意想不到的結果。然而當我們試用$(document).ready(){ }進行設定時，這個界面就會更早地準備好可用的正确行為。

使用$(document).ready(){ }一般來說都要優于試用onload事件處理程式，但必須要明确一點的是，因為支援檔案可能還沒有家在完成，是以類似圖像的高度和寬度這樣的屬性此時不一定有效。

<script type="text/javascript"> 

window.onload=function(){ 
var userName="aaa"; 
alert(userName); 
} 
</script>
<script type="text/javascript"> 

$(document).ready(function(){ 
var userName="aaa"; 
alert(userName); 
}); 

</script> 
//簡寫
$(function(){ 
var userName="aaa"; 
alert(userName); 
}); 
           

注：用把js放在頁面底部的方法以及運用defer="defer" 的方法都是會出現問題的。最好使用上面的函數！