1. 程式人生 > >ready和onload的區別

ready和onload的區別

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

最基本的區別

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而言都是可以訪問的,但是,這並不意味著這些元素關聯的檔案都已經下載完畢。

  舉一個例子,有一個大型的相簿網站,為網頁中所有圖片新增某些行為,例如單擊圖片後讓它隱藏或顯示。如果使用window.onload方法來處理,那麼使用者必須等到每一幅圖片都載入完畢後,才可以進行操作。如果使用jQuery中的$(document).ready()方法來進行設定,只要DOM就緒時就可以操作了,不需要等待所有圖片下載完畢。很顯然,把網頁解析為DOM樹的速度比把網頁中的所有關聯檔案載入完畢的速度快很多。

  另外需要注意一點,由於在$(document).ready()方法內註冊的事件,只要DOM就緒就會被執行,因此可能此時元素的關聯檔案未下載完。例如與圖片有關的HTML下載完畢,並且已經解析為DOM樹了,但很有可能圖片還未載入完畢,所以例如圖片的高度和寬度這樣的屬性此時不一定有效。要解決這個問題,可以使用JQuery中另一個關於頁面載入的方法——load()方法。load()方法會在元素的onload事件中繫結一個處理函式。如果處理函式繫結給window物件,則會在所有內容(包括視窗、框架、物件和影象等)載入完畢後觸發,如果處理函式繫結在元素上,則會在元素的內容載入完畢後觸發。

         $(window).load(function(){  } )  等價於js中的   window.onload=funciton(){  }