JavaScript判斷DOM何時載入完畢的技巧_javascript技巧

處理HTML DOM文件有一個難題是，JavaScript可以在DOM完全載入之前執行，這會為你的程式碼引發不少潛在的問題。瀏覽器的渲染和操作順序大致如下列表：

HTML解析完畢
外部腳本和樣式表加載完畢
腳本在文檔內解析並執行
HTML DOM完全建構
圖片和外部內容載入
網頁完成載入

在網頁頭部並且從外部文件載入的腳本會在HTML真正建構之前執行。如前所述，這是個至關重要的問題，因為這兩個執行的腳本並不能存取還不存在的DOM。幸好，我們還有若干的補救方法。
目前，最常用的級數是完全等待整個頁面載入完畢才執行DOM操作。這種技巧只需利用window物件的load事件來綁定一個函數，頁面載入完畢即可觸發。

複製程式碼 程式碼如下:

addEvent(window, "load", function(){
// do something
});

最簡單的操作卻是最慢的。在載入過程的順序清單中，你會注意到頁面的載入完畢與否完全被最後一步所掌控。這就是說，如果頁面有很多的圖片、影片等，使用者可能得登上一段時間JavaScript才執行。
另一個級數可用以監聽 DOM 載入狀態，可能是最複雜的（從實作角度來看），但也是最有效地。
這項技術在不堵塞瀏覽器載入的情況下盡可能快速地檢查 HTML DOM文件是否已經載入了執行所必須得屬性。以下是檢查HTML DOM是否可用的幾個要點：

document: 你需要知道DOM文件是否已經載入。若能夠快地檢查，運氣好的話你會看到undefined。
document.getElementsByTagName和document.getElementById：頻繁使用document.getElementsByTagName和document.getElementById函數檢查文檔，當存在這些函數則表示DOM已經載入完成。
document.body: 作為額外補充，檢查元素是否已完全載入。理論上前一個檢查應該已經能做出判斷，但我發現有些情況下還不夠。
使用這些檢查就足夠判斷DOM是否可用了（「足夠」在此表示可能會有一定毫秒級的時間差）。這個方法幾乎沒有瑕疵。單獨使用前述檢查，腳本應該可以在現代瀏覽器中運作得相對良好。但是，最近（2008年?）Firefox實現了快取改進，使得window載入事件實際上可以在腳本能檢查到DOM是否可用之前觸發。為了能發揮這個優勢，我同時為window載入事件附加檢查，以期能獲得更快的執行速度。

最後，domReady函數集合了所有需要在DOM可用時就執行的函數的參考。一旦DOM被認為是可用的，就呼叫這些引用並按順序一一執行。

複製程式碼 程式碼如下:

// 監聽DOM 是否可用的函數// 假如DOM已經加載，馬山執行函數
if(domReady.done) return f();

// 假如我們已經增加了一個函數
if(domReady.timer) {
// 把它假如待執行函數清單中
domReady.ready.push(f);
} else {
// 為頁面載入完畢綁定一個事件，以防它最先完成。
addEvent(window, "load", isDOMReady);
// 初始化執行函數的陣列
domReady.ready = [f];
// 盡可能快的檢查DOM是否已可用
domReady.timer = setInterval(isDOMReady, 13);
}
}

// 檢查DOM 是否已可操作
function isDOMReady() { 能判斷DOM已可能，忽略
if(domReady.done) return false;

// 檢查若干函數和元素是否可能
if(document &&getdocument.getElementsByTagName && document. document.body) {
// 如果可用，我們停止檢查
clearInterval(domReady.timer);
domReady.timer = null;

// 執行所有正在等待的函數
for(var i = 0; i domReady.ready[i]();
// 記錄我們在此已經完成
domReady.ready = null;
domReady.done = true;
}
}
}


現在我們來看看在HTML文件中是如何執行的。假設已經將domReady函數寫到一個名為domready.js的外部檔案

複製程式碼 程式碼如下:

測試DOM 載入


domReady(function(){
alert("DOM 已載入！");
// 執行某些操作
});
腳本>
頭>

測試DOM 載入

身體>