頁面加載事件--DOMContentLoaded

Tikitoo 發(fā)布于2019-08-20 14:48 / 2525人閱讀

摘要：這個時候就出場了，它定義為當(dāng)頁面文檔加載并解析完畢之后會馬上出發(fā)事件，而不會等待樣式文件圖片文件和子框架頁面的加載。

DOMContentLoaded 和 window.onload 的區(qū)別

當(dāng)頁面完全加載完畢后會觸發(fā) window.onload 事件，我們知道可以利用 window.onload 事件來觸發(fā)并執(zhí)行需要頁面完全加載完畢后才能執(zhí)行的 javascript 腳本，但是假如頁面包含很多樣式文件、圖片文件、子框架頁面（iframe）的話，onload 事件也會被相應(yīng)延遲到這些文件加載完成才執(zhí)行，有時候并不是我們所需要的，例如我們想知道頁面從接受完畢到 dom 樹解析完成所需要的時間，那么 onload 事件則不適合了。

這個時候 DOMContentLoaded 就出場了，它定義為：當(dāng)頁面文檔加載并解析完畢之后會馬上出發(fā) DOMContentLoaded 事件，而不會等待樣式文件、圖片文件和子框架頁面的加載。

示例

兼容性

DOMContentLoaded 目前支持所有主流瀏覽器，IE9 之后也支持，更多請看can I use?

如果要兼容 IE，則需要額外兩個事件，在 IE8 中，可以使用 readystatechange 事件來監(jiān)測 DOM 文檔是否加載完畢，在更早的 IE 版本可以通過每隔一段時間用 try/catch 執(zhí)行一次 document.documentElement.doScroll("left") 來監(jiān)測這一狀態(tài)，因為這條代碼在 DOM 加載執(zhí)行完畢之前會拋出錯誤（throw an error）

根據(jù)以上的解釋，我們可以寫一個兼容 IE 的 DOMContentLoaded 事件from

// if IE
function IEContentLoaded (w, fn) {
    var d = w.document, done = false,
    // only fire once
    init = function () {
        if (!done) {
            done = true;
            fn();
        }
    };
    // polling for no errors
    (function () {
        try {
            // throws errors until after ondocumentready
            d.documentElement.doScroll("left");
        } catch (e) {
            setTimeout(arguments.callee, 50);
            return;
        }
        // no errors, fire
        init();
    })();
    // trying to always fire before onload
    d.onreadystatechange = function() {
        if (d.readyState == "complete") {
            d.onreadystatechange = null;
            init();
        }
    };
}

實驗分割線

目前很多庫都實現(xiàn)了兼容性的頁面加載完成事件，大概思路是先判斷 document.readyState === "complete" 是否為真，如果為真則直接執(zhí)行腳本，否則才將腳本綁定到頁面加載完成的事件，然后根據(jù) document 是否有 addEventListener 來區(qū)分主流瀏覽器和 IE 瀏覽器，因為 IE9 及以后基本和主流瀏覽器一樣的標(biāo)準(zhǔn)，所以主要用來區(qū)分 IE8 及以下，對于主流瀏覽器采用 DOMContentLoaded + window.load, 對于 IE8 及以下，采用 onreadystatechange + window.onload + doScroll。

這里要注意， onreadstatechange 事件并不可靠，如果頁面中存在圖片的時候，可能反而在 onload 事件之后才觸發(fā)，正常來說，它只能正確地執(zhí)行頁面不包含二進(jìn)制資源或者非常少或者被緩存為時作為一個備選方案

function domReady(fn) {
    var ready = false,
        top = false,
        doc = window.document,
        root = doc.documentElement,
        modern = doc.addEventListener,
        add = modern ? "addEventListener" : "attachEvent",
        del = modern ? "removeEventListener" : "detachEvent",
        pre = modern ? "" : "on",
        init = function(e) {
            if (e.type === "readystatechange" && doc.readyState !== "complete") return;
            (e.type === "load" ? window : doc)[del](pre + e.type, init, false);
            if (!ready && (ready = true)) fn.call(window, e.type || e);
        },
        poll = function() {
            try {
                root.doScroll("left");
            } catch(e) {
                setTimeout(pull, 50);
                return;
            }
            init("poll");
        };
        
        if (doc.readyState === "complete") fn.call(window, "lazy");
        else {
            if (!modern && root.doScroll) {
                try {
                    top = !window.frameElement;
                } catch(e) {}
                if (top) poll();
            }
            doc[add](pre + "DOMContentLoaded", init, false);
            doc[add](pre + "readystatechange", init, false);
            window[add](pre + "load", init, false);
        }
}

相關(guān)事件

readystatechange

load

beforeunload

unload

拓展

jquery ready 分析

ContentedLoaded

關(guān)于DOMReady的IE兼容實現(xiàn)，為什么說有了doScroll之后更接近DOMContentLoaded