document.ready和window.onload的區別

標籤：class   blog   c   code   tar   http   

functionjquery文檔瀏覽器指令碼css

頁面載入完成有兩種事件，一是ready，表示文檔結構已經載入完成（不包含圖片等非文字媒體檔案），

二是onload，指示頁麵包含圖片等檔案在內的所有元素都載入完成。

使用jQuery都是這樣開始寫指令碼的

 

[html] view plaincopyprint?

1. $(document).ready(function(){
2. //do something
3. })

$(document).ready(function(){         //do something      })

其實它等價於：

 

 

[html] view plaincopyprint?

1. $().ready(function(){
2. //do
3. })

$().ready(function(){  //do  })

[html] view plaincopyprint?

1. $(function(){
2. //do
3. })

$(function(){  //do      })

這個就是jquery ready()的方法就是Dom Ready，他的作用或者意義就是:在DOM載入完成後就可以可以對DOM進行操作。

 

一般情況先一個頁面響應載入的順序是，網域名稱解析-載入html-載入js和css-載入圖片等其他資訊

那麼Dom Ready應該在“載入js和css”和“載入圖片等其他資訊”之間，就可以操作Dom了。

用原生的js我們通常使用onload 如：

 

[html] view plaincopyprint?

1. window.onload=function(){
2. alert("window.onload");
3. }

window.onload=function(){      alert("window.onload");  }

這種就是Dom Load，他的作用或者意義就是:在document文檔載入完成後就可以可以對DOM進行操作，document文檔包括了載入圖片等其他資訊。

 

那麼Dom Load就是在頁面響應載入的順序中的“載入圖片等其他資訊”之後，就可以操作Dom了。

 

window.onload方法是在網頁中的所有的元素（包括元素的所有關聯檔案）都完全載入到瀏覽器之後才執行。

這種方式有一個很大的優點:不用考慮DOM元素載入的順序。

而通過jQuery中的$(document).ready()方法註冊的事件處理常式，只要在DOM完全就緒時，就可以調用了，比如一張圖片只要標籤完成，

不用等這個圖片載入完成，就可以設定圖片的寬高的屬性或樣式等。

這種方式優於onload()事件在於:$(document).ready()可以在頁面沒有完全下載時,操作頁面的DOM元素.

window.onload不能同時編寫多個，如果有多個window.onload方法，只會執行一個 並且後者覆蓋前者

$(document).ready()可以同時編寫多個，並且都可以得到執行 按順序執行

$(document).ready()優先於window.onload執行