javascript的window.onload()方法和jQuery的$(document).ready()的對比

標籤：

jQuery中$(document).ready()的作用類似於傳統JavaScript中的window.onload方法，不過與window.onload方法還是有區別的。

1.執行時間

window.onload必須等到頁面內包括圖片的所有元素載入完畢後才能執行。

$(document).ready()是DOM結構繪製完畢後就執行，不必等到載入完畢。

2.編寫個數不同

window.onload不能同時編寫多個，如果有多個window.onload方法，只會執行一個 ,後面會覆蓋前面的。
$(document).ready()可以同時編寫多個，並且都可以得到執行

3.簡化寫法

window.onload沒有簡化寫法
$(document).ready(function(){})可以簡寫成$(function(){});

window.onload()方法和$(document).ready()的對比

	window.onload	$(document).ready()
執行時機	必須等待網頁中所有的內容載入完畢後 ( 包括圖片 ) 才能執行	網頁中所有 DOM 結構繪製完畢後就執行，可以能 DOM 元素關聯的內容並沒有載入完
編寫個數	不能同時編寫多個 以下代碼無法正確執行： window.onload = function(){ alert(“text1”); }; window.onload = function(){ alert(“text2”); }; 結果只輸出第二個,即輸出為:‘test2‘;	能同時編寫多個 以下代碼正確執行： $(document).ready(function(){ alert(“Hello World”); }); $(document).ready(function(){ alert(“Hello again”); }); 結果兩次都輸出 ,先輸出Hello World,再輸出Hello again
簡化寫法	無	$(document).ready() {//do something };可以簡寫成:$(function(){ // do something });

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

注意點1:

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

$(window).load(function (){       // 編寫代碼 });

等價於 JavaScript 中的以下代碼

Window.onload = function (){     // 編寫代碼}

注意點2:

一般用到javascript，我們都是採用jQuery的模式，也就是大多數時候，第一行寫的是：

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

這個時候，不一定要等所有的js和圖片載入完畢，就可以執行一些方法，不過有些時候，必須要等所有的元素都載入完畢，才可以執行一些方法的時候，比如說，部分圖片或者什麼其他方面還沒有載入好，這個時候，點擊某些按鈕，會導致出現意外的情況，這個時候，就需要用到:

$(window).load(function() {$("#btn-upload").click(function(){   //比如說： uploadPhotos();});});

javascript的window.onload()方法和jQuery的$(document).ready()的對比