淺談DOMContentLoaded事件及其封裝方法

waruqi 發(fā)布于2019-08-19 18:41 / 2571人閱讀

摘要：事件雖然不支持，但它支持事件，該事件的目的是提供與文檔或元素的加載狀態(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ì)象上會(huì)觸發(fā)一個(gè)onload事件。該事件通常被用以執(zhí)行一些邏輯代碼。比如，你需要通過(guò)JS去訪問(wèn)一個(gè)DOM。


chengxuyuan

上述代碼運(yùn)行時(shí)肯定會(huì)報(bào)錯(cuò)，因?yàn)槟_本執(zhí)行時(shí)，id為name的div還沒(méi)有加載完成。那么什么時(shí)機(jī)才是我們獲取DOM文檔的可靠時(shí)機(jī)呢？正是我們上面說(shuō)道的onload，頁(yè)面的onload觸發(fā)時(shí)，證明頁(yè)面文檔流及資源已經(jīng)完全加載完畢，此時(shí)，獲取在文檔流中的DOM是最“安全”的時(shí)機(jī)。我們將上述代碼加以改造，如下：


chengxuyuan

再次運(yùn)行時(shí)，代碼便不會(huì)報(bào)錯(cuò)了。因此，onload事件的實(shí)際效果是當(dāng)頁(yè)面解析完DOM樹(shù)，并且完成了所有圖片、樣式表、腳本等資源的加載后才被觸發(fā)。那么問(wèn)題來(lái)了，當(dāng)資源過(guò)多過(guò)大時(shí)，onload會(huì)出現(xiàn)比較嚴(yán)重的延遲問(wèn)題，嚴(yán)重影響用戶體驗(yàn)。

2. DOMContentLoaded 事件

對(duì)比上述情況，F(xiàn)irefox的DOMContentLoaded事件就更加合理，該方法觸發(fā)的時(shí)間更早，它在DOM內(nèi)容加載完后就觸發(fā)，無(wú)需等待其他資源的加載完成。

上述代碼的執(zhí)行結(jié)果為依次打印出：

DOM已被完全加載和解析 
頁(yè)面資源全部加載完畢

由此可見(jiàn)，DOMContentLoaded事件能更早地捕獲到DOM加載完成。

目前，Webkit 525以上版本和Opera也包含該方法。此外，它目前已在HTML5中被標(biāo)準(zhǔn)化。但I(xiàn)E仍不支持DOMContentLoaded。

另外，很多JavaScript框架都有document.ready功能，例如jQuery的：

$(document).ready(function(){});

它的核心就是DOMContentLoaded事件，可以使用：

document.addEventListener("DOMContentLoaded",function(){...},false);

進(jìn)行事件綁定，但還是需要針對(duì)IE做兼容性處理。

3. onreadystatechange 事件

雖然IE不支持DOMContentLoaded，但它支持onreadystatechange事件，該事件的目的是提供與文檔或元素的加載狀態(tài)有關(guān)的信息。支持onreadystatechange事件的每個(gè)對(duì)象都有一個(gè)readyState屬性，可能包含下列5個(gè)值中的一個(gè)。

uninitialized(為初始化)：對(duì)象存在但尚未初始化。

loading(正在加載)：對(duì)象正在加載數(shù)據(jù)。

loaded(加載完畢)：對(duì)象加載數(shù)據(jù)完成。

interactive(交互)：可以操作對(duì)象了，但還沒(méi)有完全加載。

complete(完成)：對(duì)象已經(jīng)加載完畢。

onreadystatechange事件可以用于檢測(cè)DOM是否加載完畢，當(dāng)document.readyState == "complete"時(shí)，表示DOM加載完成。但是如果頁(yè)面中有iframe的話，會(huì)等到iframe中的所有資源加載完才會(huì)變成complete。此時(shí)也造成了主頁(yè)面的延遲。并且，經(jīng)測(cè)試，即使頁(yè)面中沒(méi)有iframe，該方式也與onload相當(dāng)，依然會(huì)等到所有資源下載完畢后才觸發(fā)。

4. doScroll方法

不過(guò)，IE還有個(gè)特有的方法doScroll，通過(guò)間隔調(diào)用：

document.documentElement.doScroll("left");

可以檢測(cè)DOM是否加載完成。當(dāng)頁(yè)面未加載完成時(shí)，該方法會(huì)報(bào)錯(cuò)，直到doScroll不再報(bào)錯(cuò)時(shí)，就代表DOM加載完成了。該方法更接近DOMContentLoaded的實(shí)現(xiàn)。

5. Javascript封裝DOMContentLoaded事件

以下，是JS封裝DOMContentLoaded事件從而達(dá)到良好的兼容性的一個(gè)簡(jiǎn)單的代碼實(shí)現(xiàn)。

function ready(fn){

    // 目前Mozilla、Opera和webkit 525+內(nèi)核支持DOMContentLoaded事件
    if(document.addEventListener) {
        document.addEventListener("DOMContentLoaded", function() {
            document.removeEventListener("DOMContentLoaded",arguments.callee, false);
            fn();
        }, false);
    } 

    // 如果IE
    else if(document.attachEvent) {
        // 確保當(dāng)頁(yè)面是在iframe中加載時(shí)，事件依舊會(huì)被安全觸發(fā)
        document.attachEvent("onreadystatechange", function() {
            if(document.readyState == "complete") {
                document.detachEvent("onreadystatechange", arguments.callee);
                fn();
            }
        });

        // 如果是IE且頁(yè)面不在iframe中時(shí)，輪詢調(diào)用doScroll 方法檢測(cè)DOM是否加載完畢
        if(document.documentElement.doScroll && typeof window.frameElement === "undefined") {
            try{
                document.documentElement.doScroll("left");
            }
            catch(error){
                return setTimeout(arguments.callee, 20);
            };
            fn();
        }
    }
};

對(duì)于IE，首先注冊(cè)document的onreadystatechange事件，這是為了避免當(dāng)頁(yè)面處于iframe中時(shí)，doScroll方法會(huì)失效，因此在實(shí)現(xiàn)代碼中做了判斷。之后，判斷如果是IE并且頁(yè)面不在iframe當(dāng)中，則通過(guò)setTimeout來(lái)不斷的調(diào)用：

document.documentElement.doScroll("left");

直到調(diào)用成功，代表DOM加載完成。

總結(jié)一下，開(kāi)發(fā)時(shí)我們可以通過(guò)封裝DOMContentLoaded事件來(lái)檢測(cè)頁(yè)面DOM是否加載完畢，然后執(zhí)行邏輯代碼，提升用戶體驗(yàn)。

云服務(wù)器 GPU云服務(wù)器 dns域名格式及其解析方法免費(fèi)域名空間及其使用方法封裝java事件dll python封裝方法

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

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

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

登陸后可評(píng)論

0條評(píng)論

waruqi

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

linux文件系統(tǒng)和日志分析

閱讀 1384·2021-11-25 09:43
2021年11月國(guó)產(chǎn)數(shù)據(jù)庫(kù)排行榜：openGauss闖入前三，Kingbase流行度與日俱增，TDe

閱讀 3603·2021-11-10 11:48
【STM32】位操作、按位與、按位或、按位異或、取反、左移、右移等基礎(chǔ) C 語(yǔ)言知識(shí)補(bǔ)充

閱讀 5175·2021-09-23 11:21
css之position定位

閱讀 1608·2019-08-30 15:55
我的白板

閱讀 3519·2019-08-30 13:53
css3中的變形（transform）、過(guò)渡（transition）、動(dòng)畫(huà)（animation）屬性

閱讀 1245·2019-08-30 10:51
CSS定位

閱讀 880·2019-08-29 14:20
HTML表格布局

閱讀 1985·2019-08-29 13:11

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

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

淺談DOMContentLoaded事件及其封裝方法

相關(guān)文章