jquery中的$(document).ready()方法和window.onload方法的區別

　　負責后台的同事反饋過來一個問題，他添加的一個js效果在我做的模板上出不了效果。我過去看了他添加的js，代碼中有段window.onload方法，而模板中js也是用window.onload執行的，我猜想可能是兩個方法有沖突。經過測試確實是二者沖突，於是把其中一個改為$(document).ready()方法執行，於是問題解決。

　　但是對於window.onload和$(document).ready()二者的異同，一直不是很清楚，今天查資料認真看了下，把它記錄在此。

　　window.onload和$(document).ready()主要有兩點區別：

　　1、執行時機
　　window.onload方法是在網頁中的所有的元素（包括元素的所有關聯文件）都完全加載到瀏覽器之后才執行。而通過jQuery中 的$(document).ready()方法注冊的事件處理程序，只要在DOM完全就緒時，就可以調用了，比如一張圖片只要<img>標簽 完成，不用等這個圖片加載完成，就可以設置圖片的寬高的屬性或樣式等。

　　——其實從二者的英文字母可以大概理解上面的話，onload即加載完成，ready即DOM准備就緒。

　　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”，兩個事件處理程序按順序執行