淺談文檔加載完成事件——document.ready和onload的差別

文檔加載完成的兩種事件

• ready，表示文檔結構已經加載完成（不包含圖檔等非文字媒體檔案）
• onload，訓示頁面包含圖檔等非文字媒體檔案在内的所有元素都加載完成。

1、DOM ready

文檔加載的順序：域名解析-->加載HTML-->加載JavaScript和CSS-->加載圖檔等非文字媒體檔案。

DOM ready在加載JavaScript和CSS與加載圖檔等非文字媒體檔案之間，表示DOM加載完成，可以對DOM進行操作。

例如，隻要<img>标簽加載完成，不用等該圖檔加載完成，就可以設定圖檔的屬性或樣式等。

在原生JavaScript中沒有Dom ready的直接方法。

jQuery的ready()方法：

$(function(){
	...
});
           

等價于

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

等價于

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

2、DOM load

文檔加載的順序：域名解析-->加載HTML-->加載JavaScript和CSS-->加載圖檔等非文字媒體檔案。

DOM load在加載圖檔等非文字媒體檔案之後，表示在document文檔加載完成後才可以對DOM進行操作，document文檔包括了加載圖檔等非文字媒體檔案。

例如，需要等該圖檔加載完成，才可以設定圖檔的屬性或樣式等。

在原生JavaScript中使用onload事件。

window load：

window.onload = function() {
	...
}
           

圖檔load：

document.getElementsByTagName("img")[0].onload = function() {
	...
}