JavaScript：onload和ready的不同

在學(xué)習(xí) JavaScript 時(shí)，常常使用的是 window.onload 方法，在 jQuery 中，又學(xué)習(xí)使用了 $(document).ready() 方法。其實(shí) jQuery 就是一種輕量級(jí)的JavaScript。這兩個(gè)事件都是在頁(yè)面文檔加載時(shí)觸發(fā)的，但是二者還是有區(qū)分的，其實(shí)我的內(nèi)心里也一直困惑著，但是困惑總是要有明朗的一天的。

下面就說(shuō)說(shuō)它們之間的不同吧！

1.履行時(shí)間

window.onload( ) 必須等到頁(yè)面內(nèi)包括圖片的所有元素加載終了后才能履行。 

$(document).ready( )是 DOM 結(jié)構(gòu)繪制終了后就履行，沒(méi)必要等到加載終了。也就是說(shuō) $(document).ready( ) 要比window.onload( ) 先履行。

2.編寫(xiě)個(gè)數(shù)不同

window.onload( )不能同時(shí)編寫(xiě)多個(gè)，如果有多個(gè) window.onload( ) 方法，只會(huì)履行一個(gè) 

$(document).ready( )可以同時(shí)編寫(xiě)多個(gè)，并且都可以得到履行

3.簡(jiǎn)化寫(xiě)法

window.onload( )沒(méi)有簡(jiǎn)化寫(xiě)法 

$(document).ready(function( ){  })可以簡(jiǎn)寫(xiě)成 $(function( ){  });

在常規(guī)的 JavaScript 代碼中，通常使用 window.onload( )方法，而在 jQuery 中，使用的是 $(document).ready( ) 方法。

$(document).ready( )方法和 window.onload( ) 方法有相似的功能，但是在履行時(shí)機(jī)方面是有區(qū)分的。window.onload( ) 方法是在網(wǎng)頁(yè)中所有的元素（包括元素的關(guān)聯(lián)文件）完全加載到閱讀器后才履行，即 JavaScript 此時(shí)才可以訪問(wèn)網(wǎng)頁(yè)中的任何元素。而通過(guò) jQuery 中的 $(document).ready() 方法注冊(cè)的事件處理程序，可以在 DOM 完全就緒時(shí)就能夠被調(diào)用。此時(shí)，網(wǎng)頁(yè)的所有元素對(duì)jQuery而言都是可以訪問(wèn)的，但是，這其實(shí)不意味著這些元素關(guān)聯(lián)的文件都已下載終了。

例：load( ) 方法會(huì)在元素的 onload 事件中綁定一個(gè)處理函數(shù)。如果處理函數(shù)綁定給 window 對(duì)象，則會(huì)在所有內(nèi)容（包括窗口、框架、對(duì)象和圖象等）加載終了后觸發(fā)，如果處理函數(shù)綁定在元素上，則會(huì)在元素的內(nèi)容加載終了后觸發(fā)。

最多見(jiàn)的例子是一些圖片的網(wǎng)站，有時(shí)候你會(huì)看到有的網(wǎng)站是所有的圖片都有一個(gè)占位符，在頁(yè)面加載好之前圖片就已占有一定的空間了，然后每張各自的加載，這類(lèi)情勢(shì)是使用了 $(document).ready( )方法。有的網(wǎng)頁(yè)是要等全部圖片都加載好以后 才顯示網(wǎng)頁(yè)，當(dāng)網(wǎng)速不好的時(shí)候一個(gè)頁(yè)面需要等很久才能顯示出來(lái)，這就是使用了 window.onload( )方法。很明顯，把網(wǎng)頁(yè)解析為 DOM 樹(shù)的速度比把網(wǎng)頁(yè)中的所有關(guān)聯(lián)文件加載終了的速度快很多。

另外需要注意一點(diǎn)，由于在 $(document).ready() 方法內(nèi)注冊(cè)的事件，只要 DOM 就緒就會(huì)被履行，因此可能此時(shí)元素的關(guān)聯(lián)文件未下載完。例如與圖片有關(guān)的 HTML下載終了，并且已解析為 DOM 樹(shù)了，但很有可能圖片還未加載終了，所以例如圖片的高度和寬度這樣的屬性此時(shí)不一定有效。要解決這個(gè)問(wèn)題，可使用 JQuery 中另外一個(gè)關(guān)于頁(yè)面加載的方法—— load() 方法。load() 方法會(huì)在元素的 onload 事件中綁定一個(gè)處理函數(shù)。如果處理函數(shù)綁定給 window 對(duì)象，則會(huì)在所有內(nèi)容（包括窗口、框架、對(duì)象和圖象等）加載終了后觸發(fā)，如果處理函數(shù)綁定在元素上，則會(huì)在元素的內(nèi)容加載終了后觸發(fā)。

總結(jié)：

原以為大致相同的兩種方法，原來(lái)有這么多的差異，就加載的速度上就是很明顯。所以，學(xué)習(xí)中不要太自以為是，還是一切都要弄清楚才行。