$(document).ready() 和 window.onload 在表面上看都是頁面加載時我們就去執行一個函數或動作，但是在具體的細節上$(document) ready()和window onload還是有區別的。
最基本的區別
| window.onload | $(document).ready() | |
|---|---|---|
| 資源加載的時間 | 必須等待網頁資源全部加載完畢（包括圖片等），然后再執行js代 碼 | 只需要等待網頁中的DOM結構加載完畢，就能執行js代碼 |
| 執行的次數 | 只能執行一次，多次執行會覆蓋 | 可執行多次並且不會覆蓋 |
| 對於執行次數的舉例 | window.οnlοad=function(){alert(“第一次”)} window.οnlοad=function(){alert(“第二次”)}，第一個alert不會執行，會被第二個覆蓋 | (document).ready(function()alert(“1”))(document).ready(function(){alert(“2”)}) 都會執行 |
| 其他寫法 | 無 | $(function(){}) |
1.執行時間
window.onload必須等到頁面內包括圖片的所有元素加載完畢后才能執行。
$(document).ready()是DOM結構繪制完畢后就執行，不必等到加載完畢。
2.編寫個數不同
window.onload不能同時編寫多個，如果有多個window.onload方法，只會執行一個
$(document).ready()可以同時編寫多個，並且都可以得到執行
3.簡化寫法
window.onload沒有簡化寫法
$(document).ready(function(){})可以簡寫成$(function(){});
$(document).ready()方法和window.onload方法有相似的功能，但是在執行時機方面是有區別的。window.onload方法是在網頁中所有的元素（包括元素的關聯文件）完全加載到瀏覽器后才執行，即JavaScript此時才可以訪問網頁中的任何元素。而通過jQuery中的$(document).ready()方法注冊的事件處理程序，可以在DOM完全就緒時就可以被調用。此時，網頁的所有元素對jQuery而言都是可以訪問的，但是，這並不意味着這些元素關聯的文件都已經下載完畢。
廣州設計公司https://www.houdianzi.com 我的007辦公資源網站https://www.wode007.com
舉一個例子，有一個大型的圖庫網站，為網頁中所有圖片添加某些行為，例如單擊圖片后讓它隱藏或顯示。如果使用window.onload方法來處理，那么用戶必須等到每一幅圖片都加載完畢后，才可以進行操作。如果使用jQuery中的$(document).ready()方法來進行設置，只要DOM就緒時就可以操作了，不需要等待所有圖片下載完畢。很顯然，把網頁解析為DOM樹的速度比把網頁中的所有關聯文件加載完畢的速度快很多。
另外需要注意一點，由於在$(document).ready()方法內注冊的事件，只要DOM就緒就會被執行，因此可能此時元素的關聯文件未下載完。例如與圖片有關的html下載完畢，並且已經解析為DOM樹了，但很有可能圖片還未加載完畢，所以例如圖片的高度和寬度這樣的屬性此時不一定有效。要解決這個問題，可以使用JQuery中另一個關於頁面加載的方法——load()方法。load()方法會在元素的onload事件中綁定一個處理函數。如果處理函數綁定給window對象，則會在所有內容（包括窗口、框架、對象和圖像等）加載完畢后觸發，如果處理函數綁定在元素上，則會在元素的內容加載完畢后觸發。
$(window).load(function(){ } ) 等價於js中的 window.onload=funciton(){ }