?$(document) ready()和window onload在表面上看都是頁面加載時我們就去執行一個函數或動作，但是在具體的細節上$(document) ready()和window onload還是有區別的。

最基本的區別

1.執行時間

window.onload必須等到頁面內包括圖片、flash等的所有元素加載完畢后才能執行。
$(document).ready()是DOM結構繪制完畢后就執行，不必等到加載完畢。

如<p>圖片視頻等</p>（假設頁面只有這一個標簽）,window.onload必須等<p>標簽的所有內容加載完才能執行，而$(document).ready()只要繪制完DOM結構就能執行，只需要掃描到<p></p>而不用管它的內容。

2.編寫個數不同

window.onload不能同時編寫多個，如果有多個window.onload方法，只會執行一個 （按照順序結構，執行最后一個）。
$(document).ready()可以同時編寫多個，并且都可以得到執行。

3.簡化寫法

window.onload沒有簡化寫法
$(document).ready(function(){})可以簡寫成$(function(){});
以瀏覽器裝載文檔為例，在頁面加載完畢后，瀏覽器會通過JavaScript為DOM元素添加事件。在常規的JavaScript代碼中，通常使用window.onload方法，而在jQuery中，使用的是$(document).ready()方法。

$(document).ready()方法和window.onload方法有相似的功能，但是在執行時機方面是有區別的。window.onload方法是在網頁中所有的元素（包括元素的關聯文件）完全加載到瀏覽器后才執行，即JavaScript此時才可以訪問網頁中的任何元素。而通過jQuery中的$(document).ready()方法注冊的事件處理程序，可以在DOM完全就緒時就可以被調用。此時，網頁的所有元素對jQuery而言都是可以訪問的，但是，這并不意味著這些元素關聯的文件都已經下載完畢。

如，有一個大型的圖庫網站，為網頁中所有圖片添加某些行為，例如單擊圖片后讓它隱藏或顯示。如果使用window.onload方法來處理，那么用戶必須等到每一幅圖片都加載完畢后，才可以進行操作。如果使用jQuery中的$(document).ready()方法來進行設置，只要DOM就緒時就可以操作了，不需要等待所有圖片下載完畢。很顯然，把網頁解析為DOM樹的速度比把網頁中的所有關聯文件加載完畢的速度快很多。

另外需要注意一點，由于在$(document).ready()方法內注冊的事件，只要DOM就緒就會被執行，因此可能此時元素的關聯文件未下載完。例如與圖片有關的HTML下載完畢，并且已經解析為DOM樹了，但很有可能圖片還未加載完畢，所以例如圖片的高度和寬度這樣的屬性此時不一定有效。要解決這個問題，可以使用JQuery中另一個關于頁面加載的方法——load()方法。load()方法會在元素的onload事件中綁定一個處理函數。如果處理函數綁定給window對象，則會在所有內容（包括窗口、框架、對象和圖像等）加載完畢后觸發，如果處理函數綁定在元素上，則會在元素的內容加載完畢后觸發。jQuery代碼如下：

?代碼如下	復制代碼
$(window).load(function () { //編寫代碼 })

等價與javaScript中的以下代碼：

?代碼如下	復制代碼
window.onload = function () { //編寫代碼 }

假設網頁中有兩個函數，JavaScript代碼如下：

?代碼如下	復制代碼
function one() { alert(“one”); } ? function two() { alert(“two”); }

當網頁加載完畢后，通過Javascript代碼來分別調用one函數和two函數：

?代碼如下	復制代碼
window.onload = one; window.onload = two;

然而當運行代碼后，發現只彈出字符串“two”對話框。

字符串“one”對話框不能被彈出的原因是JavaScript的onload事件一次只能保存在一個函數的引用，它會自動用后面的函數覆蓋前面的函數，因此不能在現有的行為上添加新的行為。

為了達到兩個函數順序觸發的效果，只能在創建一個新的JavaScript方法來實現，JavaScript代碼如下：

?代碼如下	復制代碼
window.onload = function () { one(); two(); }

雖然這樣編寫的代碼能解決某些問題，但還是不能滿足某些需求，例如有多個JavaScript文件，每個文件都需要用到window.onload方法，這種情況下用上面提到的方法編寫代碼會非常麻煩。你可以參考Javascript共享onload事件，而jQuery的$(document).ready()方法能夠很好地處理這些情況，每次調用$(document).ready()方法都會在現有的行為上追加新的行為，這些行為函數會根據注冊的順序依次執行。例如如下jQuery代碼：

?代碼如下	復制代碼
function one() { alert(“one”); } function two() { alert(“two”); } $(document).ready(function () { one(); }); $(document).ready(function () { two(); })

運行代碼后，會彈出字符串“one”對話框，然后彈出字符串“two”對話框

轉載于:https://www.cnblogs.com/zhangmingcheng/p/5593271.html

總結

以上是生活随笔為你收集整理的jQuery中$(document).ready()和window.onload的区别的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。