區別一：執行時間不同
-
window.onload()是在頁面所有元素（包括圖片，引用文件）加載完成后再執行。也就是說頁面所有的東西都加載完成之后再加載。
-
$(document).ready()是DOM結構繪制完畢就執行，不必等到加載完畢，意思就是，DOM數加載完畢，不必等到頁面中的圖片或其他外部文件都加載完畢。所以$(document).ready()執行更快
區別二：編寫個數不同
- window.onload()同時編寫多個，在執行的時候，只會執行最后一個。也就是說只執行一次。
- $(document).ready()編寫多個，就執行多個
區別三：有無簡寫
- window.onload()沒有簡寫的方式
- $(document).ready()簡寫 $(function(){})
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
</body>
<script>
//只會執行最后一個
window.onload = function(){
console.log('window.onload加載1');
}
window.onload = function(){
console.log('window.onload加載2');
}
window.onload = function(){
console.log('window.onload加載3');
}
//全部都會執行
$(document).ready(function(){
console.log('$.ready加載1');
})
$(document).ready(function(){
console.log('$.ready加載2');
})
$(document).ready(function(){
console.log('$.ready加載3');
})
</script>
image.png
注意：
- 如果需要獲取DOM綁定元素的屬性值時，最好使用window.onload，因為他是在所有元素加載完畢才執行，如果使用$(document).ready，DOM已經加載，但是DOM綁定的元素屬性沒有加載，所以屬性不生效。
- 要解決這個問題，可以使用 Jquery 中另一個關於頁面加載的方法 ---load() 方法。
- Load() 方法會在元素的 onload 事件中綁定一個處理函數。如果處理函數綁定給 window 對象，則會在所有內容 ( 包括窗口、框架、對象和圖像等 ) 加載完畢后觸發，如果處理函數綁定在元素上，則會在元素的內容加載完畢后觸發。
//jQuery代碼
$(window).load(function(){
})
//等價於
window.onload = function(){
}
當 onload 事件觸發時，頁面上所有的DOM，樣式表，腳本，圖片，flash都已經加載完成了。
當 DOMContentLoaded 事件觸發時，僅當DOM加載完成，不包括樣式表，圖片，flash。
我們需要給一些元素的事件綁定處理函數。但問題是，如果那個元素還沒有加載到頁面上，但是綁定事件已經執行完了，是沒有效果的。這兩個事件大致就是用來避免這樣一種情況，將綁定的函數放在這兩個事件的回調中，保證能在頁面的某些元素加載完畢之后再綁定事件的函數。
當然DOMContentLoaded機制更加合理，因為我們可以容忍圖片，flash延遲加載，卻不可以容忍看見內容后頁面不可交互。
在沒有出現DOMContentLoaded事件出現以前，許多類庫中都有模擬這個事件的方法，比如jQuery中著名的 $(document).ready(function(){});