onload和ready的不同

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

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

1.履行時間

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

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

2.編寫個數不同

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

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

3.簡化寫法

window.onload( )沒有簡化寫法 

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

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

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

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

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

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

總結：

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

生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈