成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

頁(yè)面加載事件--DOMContentLoaded

jkyin / 3294人閱讀

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

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

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

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

示例
兼容性

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

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

根據(jù)以上的解釋?zhuān)覀兛梢詫?xiě)一個(gè)兼容 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();
        }
    };
}
實(shí)驗(yàn)分割線(xiàn)

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

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

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兼容實(shí)現(xiàn)，為什么說(shuō)有了doScroll之后更接近DOMContentLoaded

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/50514.html

相關(guān)文章

  • 頁(yè)面生命周期：DOMContentLoaded, load, beforeunload, unloa

    摘要：所以有可能在所有腳本執(zhí)行完畢后觸發(fā)。如果用戶(hù)即將離開(kāi)頁(yè)面或者關(guān)閉窗口時(shí)，事件將會(huì)被觸發(fā)以進(jìn)行額外的確認(rèn)。狀態(tài)表示事件即將被觸發(fā)?？偨Y(jié)頁(yè)面事件的生命周期事件在樹(shù)構(gòu)建完畢后被觸發(fā)，我們可以在這個(gè)階段使用去訪問(wèn)元素。 頁(yè)面生命周期：DOMContentLoaded, load, beforeunload, unload 原文地址：http://javascript.info/onload.....

    lx1036 評(píng)論0 收藏0

  • 頁(yè)面生命周期：DOMContentLoaded, load, beforeunload, unloa

    摘要：所以有可能在所有腳本執(zhí)行完畢后觸發(fā)。如果用戶(hù)即將離開(kāi)頁(yè)面或者關(guān)閉窗口時(shí)，事件將會(huì)被觸發(fā)以進(jìn)行額外的確認(rèn)。狀態(tài)表示事件即將被觸發(fā)。總結(jié)頁(yè)面事件的生命周期事件在樹(shù)構(gòu)建完畢后被觸發(fā)，我們可以在這個(gè)階段使用去訪問(wèn)元素。 頁(yè)面生命周期：DOMContentLoaded, load, beforeunload, unload 原文地址：http://javascript.info/onload.....

    luckyyulin 評(píng)論0 收藏0

  • 淺談DOMContentLoaded事件及其封裝方法

    摘要：事件雖然不支持，但它支持事件，該事件的目的是提供與文檔或元素的加載狀態(tài)有關(guān)的信息。事件可以用于檢測(cè)是否加載完畢，當(dāng)時(shí)，表示加載完成。封裝事件以下，是封裝事件從而達(dá)到良好的兼容性的一個(gè)簡(jiǎn)單的代碼實(shí)現(xiàn)。 我們?cè)陂_(kāi)發(fā)時(shí)，經(jīng)常需要檢測(cè)頁(yè)面是否加載完畢，以確保腳本安全運(yùn)行，下面我們就來(lái)淺談一下檢測(cè)頁(yè)面是否加載完畢的那些事件們。 1. onload 事件 在頁(yè)面的所有資源加載完成時(shí)，window對(duì)...

    waruqi 評(píng)論0 收藏0

  • 淺談DOMContentLoaded事件及其封裝方法

    摘要：事件雖然不支持，但它支持事件，該事件的目的是提供與文檔或元素的加載狀態(tài)有關(guān)的信息。事件可以用于檢測(cè)是否加載完畢，當(dāng)時(shí)，表示加載完成。封裝事件以下，是封裝事件從而達(dá)到良好的兼容性的一個(gè)簡(jiǎn)單的代碼實(shí)現(xiàn)。 我們?cè)陂_(kāi)發(fā)時(shí)，經(jīng)常需要檢測(cè)頁(yè)面是否加載完畢，以確保腳本安全運(yùn)行，下面我們就來(lái)淺談一下檢測(cè)頁(yè)面是否加載完畢的那些事件們。 1. onload 事件 在頁(yè)面的所有資源加載完成時(shí)，window對(duì)...

    leon 評(píng)論0 收藏0

  • 前端優(yōu)化-Javascript篇(2.異步加載腳本)

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

    wpw 評(píng)論0 收藏0

  • WEB頁(yè)面的生命周期,DOMContentLoaded,load,beforeunload,unlo

    摘要：簡(jiǎn)言理解頁(yè)面的生命周期，文檔加載事件及順序?qū)﹂_(kāi)發(fā)有十分的重要意義。同步的腳本最先執(zhí)行，它先于事件執(zhí)行。當(dāng)準(zhǔn)備就緒時(shí)，事件在上觸發(fā)。表示文檔的當(dāng)前狀態(tài)，可以在事件中跟蹤文檔狀態(tài)的變更。已經(jīng)解析完畢時(shí)觸發(fā)，幾乎與同時(shí)發(fā)生，但在事件之前觸發(fā)。 簡(jiǎn)言 理解WEB頁(yè)面的生命周期，文檔加載事件及順序?qū)EB開(kāi)發(fā)有十分的重要意義。如果不理解，在元素未加載就提前操作元素，則得不到想要的結(jié)果。而如果頁(yè)面...

    Jingbin_ 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<