頁面加載事件--DOMContentLoaded

jkyin 發布于2019-08-01 16:26 / 3289人閱讀

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

DOMContentLoaded 和 window.onload 的區別

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

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

示例

兼容性

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

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

根據以上的解釋，我們可以寫一個兼容 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();
        }
    };
}

實驗分割線

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

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

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

相關事件

readystatechange

load

beforeunload

unload

拓展

jquery ready 分析

ContentedLoaded

關于DOMReady的IE兼容實現，為什么說有了doScroll之后更接近DOMContentLoaded

云服務器 GPU云服務器事件加載 php加載事件 js加載點擊事件 DOMContentLoaded

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/50514.html

頁面生命周期：DOMContentLoaded, load, beforeunload, unloa

摘要：所以有可能在所有腳本執行完畢后觸發。如果用戶即將離開頁面或者關閉窗口時，事件將會被觸發以進行額外的確認。狀態表示事件即將被觸發。總結頁面事件的生命周期事件在樹構建完畢后被觸發，我們可以在這個階段使用去訪問元素。頁面生命周期：DOMContentLoaded, load, beforeunload, unload 原文地址：http://javascript.info/onload.....

lx1036 2019-08-01 17:44 評論0 收藏0
頁面生命周期：DOMContentLoaded, load, beforeunload, unloa

摘要：所以有可能在所有腳本執行完畢后觸發。如果用戶即將離開頁面或者關閉窗口時，事件將會被觸發以進行額外的確認。狀態表示事件即將被觸發。總結頁面事件的生命周期事件在樹構建完畢后被觸發，我們可以在這個階段使用去訪問元素。頁面生命周期：DOMContentLoaded, load, beforeunload, unload 原文地址：http://javascript.info/onload.....

luckyyulin 2019-08-21 16:55 評論0 收藏0
淺談DOMContentLoaded事件及其封裝方法

摘要：事件雖然不支持，但它支持事件，該事件的目的是提供與文檔或元素的加載狀態有關的信息。事件可以用于檢測是否加載完畢，當時，表示加載完成。封裝事件以下，是封裝事件從而達到良好的兼容性的一個簡單的代碼實現。我們在開發時，經常需要檢測頁面是否加載完畢，以確保腳本安全運行，下面我們就來淺談一下檢測頁面是否加載完畢的那些事件們。 1. onload 事件在頁面的所有資源加載完成時，window對...

waruqi 2019-08-19 18:41 評論0 收藏0
淺談DOMContentLoaded事件及其封裝方法

摘要：事件雖然不支持，但它支持事件，該事件的目的是提供與文檔或元素的加載狀態有關的信息。事件可以用于檢測是否加載完畢，當時，表示加載完成。封裝事件以下，是封裝事件從而達到良好的兼容性的一個簡單的代碼實現。我們在開發時，經常需要檢測頁面是否加載完畢，以確保腳本安全運行，下面我們就來淺談一下檢測頁面是否加載完畢的那些事件們。 1. onload 事件在頁面的所有資源加載完成時，window對...

leon 2019-08-01 15:25 評論0 收藏0
前端優化-Javascript篇(2.異步加載腳本)

摘要：下面介紹非阻塞加載腳本技術也就是異步加載。非阻塞加載腳本關于的一篇好文目前所有瀏覽器都支持屬性，但是和中只有在加載外部腳本時才會生效，行內腳本使用是沒有作用的。在中，只有外部腳本才會發生阻塞。　　上篇博客說過腳本后置可以使頁面更快的加載，可是這樣的優化還是有限的，如果腳本需要執行一個耗時的操作，就算后置了它還是會阻塞后續腳本加載和執行并且阻塞整個頁面。下面介紹非阻塞加載腳本技術也就是...

wpw 2019-08-19 14:53 評論0 收藏0
WEB頁面的生命周期,DOMContentLoaded,load,beforeunload,unlo

摘要：簡言理解頁面的生命周期，文檔加載事件及順序對開發有十分的重要意義。同步的腳本最先執行，它先于事件執行。當準備就緒時，事件在上觸發。表示文檔的當前狀態，可以在事件中跟蹤文檔狀態的變更。已經解析完畢時觸發，幾乎與同時發生，但在事件之前觸發。簡言理解WEB頁面的生命周期，文檔加載事件及順序對WEB開發有十分的重要意義。如果不理解，在元素未加載就提前操作元素，則得不到想要的結果。而如果頁面...

Jingbin_ 2019-08-22 14:50 評論0 收藏0