$(document).ready() 和 window.onload 的差別

參考資料：

http://blog.csdn.net/lcc921528642/article/details/48379431

http://www.cnblogs.com/jiajia123/p/6107748.html

http://www.cnblogs.com/Chen-XiaoJun/articles/5829876.html

說實話，一直還沒完全清楚以下幾個 JS 差別：

$(window).load()

與

$(document).ready()

以及

$(document).ready()

與

window.onload

。

剛網上搜了下資料，先整理下。

1、執行時間上的差別：

window.onload 必須等到頁面内（包括圖檔的）所有元素加載到浏覽器中後才能執行。而 $(document).ready(function(){}) 是DOM結構加載完畢後就會執行。

2、編寫個數不同：

window.onload 不能同時寫多個，如果有多個window.onload，則隻有最後一個會執行，它會把前面的都覆寫掉。$(document).ready(function(){}) 則不同，它可以編寫多個，并且每一個都會執行。

3、簡寫方法：

window.onload 沒有簡寫的方法，

$(document).ready(function(){})

可以簡寫為

$(function(){})

。

另外：由于在 $(document).ready() 方法内注冊的事件，隻要DOM就緒就會被執行，是以可能此時元素的關聯檔案未下載下傳完，例如與圖檔有關的HTML下載下傳完畢，并且已經解析為DOM樹了，但很有可能圖檔還未加載完畢，是以例如圖檔的高度和寬度這樣的屬性此時不一定有效。

要解決這個問題，可以使用JQuery中另一個關于頁面加載的方法 — load() 方法。load() 方法會在元素的onload事件中綁定一個處理函數。如果處理函數綁定在元素上，則會在元素的内容加載完畢後觸發。如：$(window).load(function(){})=====window.onload = function(){}…

詳細内容見：

http://www.php100.com/html/program/jquery/2013/0905/5954.html

總結來說

JavaScript中的：

window.onload = function(){ 
  alert(“text1”); 
}; 
           

等同于JQuery中

$(window).load(function(){
    alert("text1");
});
           

他們都是用于當頁面的所有元素，包括外部引用檔案，圖檔等都加載完畢時運作函數内的alert函數。load方法隻能執行一次，如果在js檔案裡寫了多個，隻能執行最後一個。（初學者常常在頁面結構裡對元素直接寫行為函數，這樣是很醜陋的，可以用選擇器等，在js代碼裡對元素進行行為控制。）

在jquery中

$(document).ready(function(){
    alert("text2");
});
           

等同于（簡化寫法）

$(function(){
    alert("text2");
});
           

他們都是用于當頁面的标準DOM元素被解析成DOM樹後就執行内alert函數。這個函數是可以在js檔案裡多次編寫的，對于多人共同編寫的js就有很大的優勢，因為所有行為函數都會執行到。而 $(document).ready() 函數在HMTL結構加載完後就可以執行，不需要等大型檔案加載或者不存在的連接配接等耗時工作完成才執行，效率高。

當然 也要根據項目需求來使用，比如有時候有些時候圖檔或者重要資訊沒出來，會對使用者操作産生誤導，或者需要等擷取某些圖檔高寬資料後再執行的行為函數，就得使用window.onload了。