javascript知識點之onload和jquery方法ready()的區別

大多數情況下，jQuery代碼的編寫，都要求我們將jquery的代碼放在

$(document).ready(function(){

      ........jquery代碼...........

});

上面的代碼和

$().ready(function(){
      ........jquery代碼...........
});

$(function(){
      ........jquery代碼...........
});

是等同的。

注意：有時候我們自己編寫的jquery代碼出現莫名其妙的問題，看似正常的代碼，但是就是在啟動並執行時候出錯了，那麼請先檢查一下你的代碼有沒有放在$(document).ready()方法中運行。

接下來我們來說說$(document).ready()方法和window.onload方法的區別：
他們的主要的區別有兩點：

1. 執行時機
   window.onload方法是在網頁中的所有的元素（包括元素的所有關聯檔案）都完全載入到瀏覽器之後才執行。而通過jQuery中的$(document).ready()方法註冊的事件處理常式，只要在DOM完全就緒時，就可以調用了，比如一張圖片只要<img>標籤完成，不用等這個圖片載入完成，就可以設定圖片的寬高的屬性或樣式等。
2. $(document).ready()方法可以多次使用而註冊不同的事件處理常式，而window.onload一次只能儲存對一個函數的引用，多次綁定函數只會覆蓋前面的函數。
   先來看window.onload方法在一個頁面上註冊兩次會是什麼樣的結果：

function one(){
alert("one");
}
function two(){
alert("two");
}
window.onload = two ;
window.onload = one ;上面的代碼運行後，會彈出“one”。再來看看$(document).ready()方法分兩次調用會是什麼結果。
function one(){
alert("one");
}
function two(){
alert("two");
}
$(document).ready(function(){
one();
});
$(document).ready(function(){
two();
});
上面的代碼運行後，會分別彈出“one”和“two”。
另外注意：

最近在改一個嵌入在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 );
結果很明了了，IE只有在頁面不是嵌入frame中的情況下才和Firefox等一樣，先執行$(document).ready()的內容，再執行原來的onload方法。對於嵌入frame中的頁面，也只是綁定在load事件上執行，所以自然是在原來的onload綁定的方法執行之後才輪到。而這個頁面中正好在測試環境下有一個訪問不到的資源，那十幾秒的延遲正是它放大出的時間差。
Thanks：http://www.skygq.com/2011/02/07/jquery-document-ready-and-windo-onload/http://www.cnblogs.com/joycel/archive/2010/05/26/1744194.html