document.ready和window.onload的區別
阿新 • • 發佈:2019-01-30
頁面載入完成有兩種事件,一是ready,表示文件結構已經載入完成(不包含圖片等非文字媒體檔案),
二是onload,指示頁面包含圖片等檔案在內的所有元素都載入完成。
使用jQuery都是這樣開始寫指令碼的
$(document).ready(function(){
//do something
})
其實它等價於:
$().ready(function(){
//do
})
$(function(){
//do
})
這個就是jquery ready()的方法就是Dom Ready,他的作用或者意義就是:在DOM載入完成後就可以可以對DOM進行操作。
一般情況先一個頁面響應載入的順序是,域名解析-載入html-載入js和css-載入圖片等其他資訊
那麼Dom Ready應該在“載入js和css”和“載入圖片等其他資訊”之間,就可以操作Dom了。
用原生的js我們通常使用onload 如:
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執行