Javascript封裝DOMContentLoaded事件實例_javascript技巧

最近在寫一個Javascript的框架，剛把DOMContentLoaded事件封裝好，略帶小興奮，把開發過程中遇到的原理和兼容性問題做篇筆記，省的忘記到處找。

我們在寫js程式碼的時候，通常都會加入window.onload事件，主要是為了在DOM載入完後可以使用getElementById，getElementsByTagName等方法選取DOM元素進行操作，但是window.load會等到載入完DOM、腳本、CSS，最後加載完圖片甚至是iframe中的所有資源才會觸發，很多時候網頁的圖片較多較大，要等最後圖片這個耗時大戶加載完才執行js明顯有些太遲了，很多時候都會影響使用者體驗。

很多js框架都有個document.ready的功能，像JQuery的$(document).ready()方法，可以在DOM載入完就立即執行js程式碼，讓圖片自個慢慢載入吧。

document.ready的核心是DOMContentLoaded事件，firefox、chrome、opera、safari、ie9 都可以使用addEventListener('DOMContentLoaded',fn,false)進行事件綁定，而ie6~8不支援DOMContentLoaded事件，所以要針對ie6~8做相容性處理。

資料上說ie6~8可以使用document.onreadystatechange事件監聽document.readyState狀態是否等於complete來判斷DOM是否載入完畢，如果頁面中嵌有iframe的話，ie6~8的document.readyState會等到iframe中的所有資源載入完才會變成complete，此時iframe變成了耗時大戶。但經過測試，即使頁面中沒有iframe，當readyState等於complete時，實際觸發的是onload事件而不是DOMContentLoaded事件，對這點表示驚奇。

還好ie有個特有的doScroll方法，當頁面DOM未載入完成時，呼叫doScroll方法時，就會報錯，反過來，只要一直間隔呼叫doScroll直到不報錯，那就表示頁面DOM載入完畢了，不管圖片和iframe中的內容是否加載完畢，此法都有效。

如果有多個js檔案綁定了document.ready事件，為了防止瀏覽器重複綁定，同時有序執行，可以引入一個事件佇列機制來解決。

以上就是document.ready事件的原理和相容性問題，下面貼段實例程式碼，為了方便理解執行過程，使用函數封裝的模式，執行過程都寫在註解裡了，如果有不妥之處歡迎指教。

複製程式碼 程式碼如下:

//儲存domReady的事件佇列
eventQueue = [];

//判斷DOM是否載入完畢
isReady = false;

/判斷DOMReady是否綁定
isBind = false;

/*執行domReady()
 *
 *@param    {function}
 *@execute *將事件處理程序輸入到事件佇列,並綁定DOMContentLoaded
 *          如果DOM負載已完成，則立即執行
 *@caller
 */
function domRe     fn .call(window);
    }
    else{
        eventQueue.push(fn);<.>};

/*domReady事件綁定
 *
 *@param    null
 *@execute  現代瀏覽器透過addEvListener綁定DOMContentLoaded,
 *@caller   domReady()
 */
function bindReady(){
    if (isReady)  >
    if (window.addEventListener) {
        document.addEventListener('DOMContentLoaded',execFn,false); >        doScroll();
};
};

/*doScroll判斷ie6-8的DOM是否載入完成
 *
 *@param    null
 *@execute *@param    null
 *@execute *@param    null
 *@execute  doScroll *@caller   bindReady()
 */
function doScroll(){
    try{
        catch(error) {
        return setTimeout(doScroll,20);
    };
    execFn(); *@execute  循環執行佇列中的事件處理程序
 *@caller   bindReady()
 */
function  ady = true;
        for (var i = 0; i           🎜>        eventQueue = [];
    };
};

//js檔案1
domReady(function(){
    ...
});
//js2domReady(function(){
    ...
});

//注意，如果是異步載入的js就不要綁定domReady方法，不然函數不會執行，
//因為非同步載入的js下載之前，DOMContentLoaded已經觸發，addEventListener執行時已經監聽不到



測試頁面：都載入了兩張很大的圖片，onload需要圖片載入完才能執行js，DOMContentLoaded只需等到DOM載入完即可執行js。可以開啟firebug查看載入過程，每次測試前記得先清理下瀏覽器快取。