| window.onload() | $(document).ready() | |
|---|---|---|
| 執行時機 | 必須等到檔案內容全部加載完畢才會執行(包括圖表等) | 只要檔案的DOM結構加載完畢就會執行 |
| 執行次數 | 只能執行一次(如果有多次呼叫，后面的會覆寫前面的) | 可執行多次且互不影響 |
| 簡寫 | 無 | $(function() {}) |
$(document).ready()方法和window.onload方法有相似的功能，但是在執行時機方面是有區別的，window.onload方法是在網頁中所有的元素（包括元素的關聯檔案，如圖片、樣式檔案、腳本檔案）完全加載到瀏覽器后才執行，而jQuery中的$(document).ready()方法，只要等網頁中的DOM結構加載完畢就會執行，此時，網頁的所有元素對jQuery而言都是可以訪問的，但是，這并不意味著這些元素關聯的檔案都已經下載完畢，
舉一個例子，有一個大型的圖庫網站，為網頁中所有圖片添加某些行為，例如單擊圖片后讓它隱藏或顯示，如果使用window.onload方法來處理，那么用戶必須等到每一幅圖片都加載完畢后，才可以進行操作，如果使用jQuery中的$(document).ready()方法來進行設定，只要DOM就緒時就可以操作了，不需要等待所有圖片下載完畢，很顯然，把網頁決議為DOM樹的速度比把網頁中的所有關聯檔案加載完畢的速度快很多，
另外需要注意一點，由于在$(document).ready()方法內注冊的事件，只要DOM就緒就會被執行，因此可能此時元素的關聯檔案未下載完，例如與圖片有關的HTML下載完畢，并且已經決議為DOM樹了，但很有可能圖片還未加載完畢，所以圖片的高度和寬度這樣的屬性此時不一定有效，要解決這個問題，可以使用JQuery中另一個關于頁面加載的方法——load()方法，load()方法會在元素的onload事件中系結一個處理函式，如果處理函式系結給window物件，則會在所有內容（包括視窗、框架、物件和影像等）加載完畢后觸發，如果處理函式系結在元素上，則會在元素的內容加載完畢后觸發，
$(window).load(function(){ } ) 等價于js中的 window.onload=funciton(){ }轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/134934.html
標籤：JavaScript
上一篇：vue配置路由以及設定路徑簡寫
下一篇：淺談瀏覽器垃圾回識訓制