jquery中$(document).ready()和onload用法區別詳解介紹

頁面載入完成有兩種事件，一是ready，表示文檔結構已經載入完成（不包含圖片等非文字媒體檔案），二是onload，指示頁 麵包含圖片等檔案在內的所有元素都載入完成。(可以說：ready 在onload 前載入！！！)
一般樣式控制的，比如圖片大小控制放在onload 裡面載入;

jS事件觸發的方法，可以在ready 裡面載入;
用jQ的人很多人都是這麼開始寫指令碼的：
通常的寫法

代碼如下	複製代碼
$(function(){ // do something });

其實這個就是jq ready()的簡寫，他等價於：

代碼如下	複製代碼
$(document).ready(function(){ //do something })

也等於下面這個方法，jQuer的預設參數是：“document”；

代碼如下	複製代碼
$().ready(function(){ //do something })

$(document).Ready()方法 VS OnLoad事件 VS $(window).load()方法
接觸JQuery一般最先學到的是何時啟動事件。在曾經很長一段時間裡,在頁面載入後引發的事件都被載入 在”Body”的Onload事件裡.
對於Body的Onload事件和JQuery的Ready方法相比，有很多弊端.比如:
載入 多個函數的問題
■<body onload="a();b();">
</body>
在Onload事件中 只能這樣載入，很醜陋…
■而在JQuery中你可以利用多個JQuery.Ready()方法，它們會按次序依次執行
代碼和內容不分離
這個貌似不用說了，讓人深惡痛絕-.-!!◦ 執行先後順序不同
■對於Body.Onload事件，是在載入完所有頁面內容才會觸發，我的意思是所有內容,包括圖片，flash等.如果頁面的這些內容很多會讓使用者等待很 長時間.
■ 而對於$(document).ready()方法，這個方法只是在頁面所有的DOM載入完畢後就會觸發,無疑很大的加快了網頁的速度.

但是對於一些特殊應用，比如圖片的放大縮小，圖片的剪裁。需要網頁所有的內容載入完畢後才執行的呢？我推薦使用$(window).load()方法，這 個方法會等到頁面所有內容載入完畢後才會觸發，並且同時又沒有OnLoad事件的弊端.

代碼如下	複製代碼
<script type="text/javascript"> $(window).load(function() { alert("hello"); }); $(window).load(function() { alert("hello again"); }); </script>

上面的代碼會在頁面所有內容載入完成後按先後順序依次執行.
當然不要忘了與之對應的Unload方法

代碼如下	複製代碼
<script type="text/javascript"> $(window).unload(function() { alert("good bye"); }); </script>

上面代碼會在頁面關閉時引發.
在 所有DOM載入之前引發JS代碼
這個方法是我在調試的時候最喜歡的，有時候開發的時候也用這種方法

代碼如下	複製代碼
<body> <script type="text/javascript"> (function() { alert("hi"); })(jQuery) </script> </body>

對， 就是利用js閉包的形式將js代碼嵌入body，這段代碼會自動執行，當然也可以直接嵌入js代碼,這種方式要注意順序問題，如下：

代碼如下	複製代碼
<body> <div id="test">this is the content</div> <script type="text/javascript"> alert($("#test").html());//I Can display the content </script> </body> <body> <script type="text/javascript"> alert($("#test").html());//I Can't display the content </script> <div id="test">this is the content</div> </body>

$(document).ready()和onload的載入順序

翻翻jquery的源碼看看$(document).ready()是如何?的吧：

代碼如下	複製代碼
if ( jQuery.browser.msie && window == top ) (function(){ if (jQuery.isReady) return; try { document.documentElement.doScroll("left"); } catch( error ) { 　　　　　　setTimeout( arguments.callee, 0 ); 　　　　　　 return; 　　　　} 　　 // and execute any waiting functions 　　　jQuery.ready(); })(); jQuery.event.add( window, "load", jQuery.ready );

結果很明了了，IE只有在頁面不是嵌入frame中的情況下才和Firefox等一樣，先執行$(document).ready()的內容，再執行原來的onload方法。對於嵌入frame中的頁面，也只是綁定在load事件上執行，所以自然是在原來的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(){});

 以 瀏覽器裝載文檔為例，在頁面載入完畢後，瀏覽器會通過 Javascript 為 DOM 元素添加事件。在常規的 Javascript 代碼中，通常使用 window.onload 方法，而在 Jquery 中，使用的是 $(document).ready() 方法。 $(document).ready() 方法是事件模組中最重要一個函數，可以極大的提高 Web 應用程式的速度。

window.load $(document).ready()
執行時機 必須等待網頁中所有的內容載入完畢後 ( 包括圖片 ) 才能執行 網頁中所有 DOM 結構繪製完畢後就執行，可以能 DOM 元素關聯的內容並沒有載入完
編寫個數 不能同時編寫多個
以下代碼無法正確執行：

代碼如下	複製代碼
window.onload = function(){ alert(“text1”); }; window.onload = function(){ alert(“text2”); };

結果只輸出第二個 能同時編寫多個
以下代碼正確執行：

代碼如下	複製代碼
$(document).ready(function(){ alert(“Hello World”); }); $(document).ready(function(){ alert(“Hello again”); }); 結果兩次都輸出 簡化寫法 無 $(function(){ // do something });

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

代碼如下	複製代碼
$(window).load(function (){ // 編寫代碼 });等價於 JavaScript 中的以下代碼 Window.onload = function (){ // 編寫代碼 }

最近在改一個嵌入在frame中的頁面的時候，使用了jquery做效果，而頁面本身也綁定了onload事件。改完後，Firefox下測試正常流暢，IE下就要等個十幾秒jquery的效果才出現，黃花菜都涼了。

　　起初以為是和本身onload載入的方法衝突。網上普遍的說法是$(document).ready()是在頁面DOM解析完成後執行，而onload事件是在所有資源都準備完成之後才執行，也就是說$(document).ready()是要在onload之前執行的，尤其當頁面圖片較大較多的時候，這個時間差可能更大。可是我這頁面分明是圖片都顯示出來十幾秒了，還不見jquery的效果出來。

　　刪了onload載入的方法試試，結果還是一樣，看來沒有必要把原本的onload事件綁定也改用$(document).ready()來寫。那是什麼原因使得Firefox正常而IE就能呢？接著調試，發現IE下原來綁定的onload方法竟然先於$(document).ready()的內容執行，而Firefox則是先執行$(document).ready()的內容，再執行原來的onload方法。這個和網上的說法似乎不完全一致啊，呵呵，有點意思，好像越來越接近真相了。

翻翻jquery的源碼看看$(document).ready()是如何?的吧：

 

代碼如下	複製代碼
if ( jQuery.browser.msie && window == top ) (function(){ if (jQuery.isReady) return; try { document.documentElement.doScroll("left"); } catch( error ) { 　　　　　　setTimeout( arguments.callee, 0 ); 　　　　　　 return; 　　　　} 　　 // and execute any waiting functions 　　　jQuery.ready(); })(); jQuery.event.add( window, "load", jQuery.ready );