App下載

JavaScript:onload和ready的不同

猿友 2020-12-30 17:01:24 瀏覽數(shù) (3017)
反饋

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

下面就說說它們之間的不同吧!

 

1.履行時間

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

$(document).ready( )是 DOM 結構繪制終了后就履行,沒必要等到加載終了。也就是說 $(document).ready( ) 要比window.onload( ) 先履行。

2.編寫個數(shù)不同

window.onload( )不能同時編寫多個,如果有多個 window.onload( ) 方法,只會履行一個 

$(document).ready( )可以同時編寫多個,并且都可以得到履行

3.簡化寫法

window.onload( )沒有簡化寫法 

$(document).ready(function( ){  })可以簡寫成 $(function( ){  });

 

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


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

     

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


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


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


總結:

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


0 人點贊