網頁

2013年4月16日 星期二

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();
        }
    };
}

沒有留言:

張貼留言