JavaScript DOMContentLoaded 事件使用

這個事件很接近JQuery的 ready() function，是HTML5規格的新事件
事件的執行時間可參考下圖

一般常見到將要在文件載入時就立刻執行的程式碼寫在onload事件裡
但onload事件的發生時機是在整份HTML文件載入完成，包含圖片等額外資源
如果那些資源很龐大，則會延遲事件的執行時間，並會讓使用者看到未處理過的頁面

DOMContentLoaded事件則是在 DOM載入完成後發生
在過去要做到相同的效果，常見作法是將script寫在HTML文件的最下方
另外也有一些要繞點遠路的做法，或是乾脆使用framework
隨著HTML逐步地擴展規格，倚賴framework的需求也逐漸下降
實際的使用方式如下，並附上相容舊瀏覽器的作法

function DOMReady() {
    .... //do something when DOM is ready
}


//DOM ready process
if (document.addEventListener) {
    document.addEventListener("DOMContentLoaded", DOMReady, false);
} else {
    //Define a "blank" external JavaScript tag
    var src = (location.protocol == "https:") ? "src=//:" : "src='javascript:void(0)'";
    document.write("<script id='contentLoadFlag' defer='defer' " + src + "><\/script>");
    var contentLoadFlag = document.getElementById("contentLoadFlag");
    contentLoadFlag.onreadystatechange = function () {
        if (this.readyState == "complete") {
            DOMReady();
        }
    };
}