国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

淺談DOMContentLoaded事件及其封裝方法

waruqi / 2558人閱讀

摘要：事件雖然不支持，但它支持事件，該事件的目的是提供與文檔或元素的加載狀態有關的信息。事件可以用于檢測是否加載完畢，當時，表示加載完成。封裝事件以下，是封裝事件從而達到良好的兼容性的一個簡單的代碼實現。

我們在開發時，經常需要檢測頁面是否加載完畢，以確保腳本安全運行，下面我們就來淺談一下檢測頁面是否加載完畢的那些事件們。

1. onload 事件

在頁面的所有資源加載完成時，window對象上會觸發一個onload事件。該事件通常被用以執行一些邏輯代碼。比如，你需要通過JS去訪問一個DOM。



chengxuyuan

上述代碼運行時肯定會報錯，因為腳本執行時，id為name的div還沒有加載完成。那么什么時機才是我們獲取DOM文檔的可靠時機呢？正是我們上面說道的onload，頁面的onload觸發時，證明頁面文檔流及資源已經完全加載完畢，此時，獲取在文檔流中的DOM是最“安全”的時機。我們將上述代碼加以改造，如下：



chengxuyuan

再次運行時，代碼便不會報錯了。因此，onload事件的實際效果是當頁面解析完DOM樹，并且完成了所有圖片、樣式表、腳本等資源的加載后才被觸發。那么問題來了，當資源過多過大時，onload會出現比較嚴重的延遲問題，嚴重影響用戶體驗。

2. DOMContentLoaded 事件

對比上述情況，Firefox的DOMContentLoaded事件就更加合理，該方法觸發的時間更早，它在DOM內容加載完后就觸發，無需等待其他資源的加載完成。

上述代碼的執行結果為依次打印出：

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

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

目前，Webkit 525以上版本和Opera也包含該方法。此外，它目前已在HTML5中被標準化。但IE仍不支持DOMContentLoaded。

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

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

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

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

進行事件綁定，但還是需要針對IE做兼容性處理。

3. onreadystatechange 事件

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

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

loading(正在加載)：對象正在加載數據。

loaded(加載完畢)：對象加載數據完成。

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

complete(完成)：對象已經加載完畢。

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

4. doScroll方法

不過，IE還有個特有的方法doScroll， 通過間隔調用：

document.documentElement.doScroll("left");

可以檢測DOM是否加載完成。 當頁面未加載完成時，該方法會報錯，直到doScroll不再報錯時，就代表DOM加載完成了。該方法更接近DOMContentLoaded的實現。

5. Javascript封裝DOMContentLoaded事件

以下，是JS封裝DOMContentLoaded事件從而達到良好的兼容性的一個簡單的代碼實現。

function ready(fn){

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

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

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

對于IE，首先注冊document的onreadystatechange事件，這是為了避免當頁面處于iframe中時，doScroll方法會失效，因此在實現代碼中做了判斷。之后，判斷如果是IE并且頁面不在iframe當中， 則通過setTimeout來不斷的調用：

document.documentElement.doScroll("left");

直到調用成功，代表DOM加載完成。

總結一下，開發時我們可以通過封裝DOMContentLoaded事件來檢測頁面DOM是否加載完畢，然后執行邏輯代碼，提升用戶體驗。

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

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

相關文章

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

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

    leon 評論0 收藏0

  • 2018 淺談前端面試那些事

    摘要：聲明的變量不得改變值，這意味著，一旦聲明變量，就必須立即初始化，不能留到以后賦值。 雖然今年沒有換工作的打算 但為了跟上時代的腳步 還是忍不住整理了一份最新前端知識點 知識點匯總 1.HTML HTML5新特性，語義化瀏覽器的標準模式和怪異模式xhtml和html的區別使用data-的好處meta標簽canvasHTML廢棄的標簽IE6 bug，和一些定位寫法css js放置位置和原因...

    LiuRhoRamen 評論0 收藏0

  • 2018 淺談前端面試那些事

    摘要：聲明的變量不得改變值，這意味著，一旦聲明變量，就必須立即初始化，不能留到以后賦值。 雖然今年沒有換工作的打算 但為了跟上時代的腳步 還是忍不住整理了一份最新前端知識點 知識點匯總 1.HTML HTML5新特性，語義化瀏覽器的標準模式和怪異模式xhtml和html的區別使用data-的好處meta標簽canvasHTML廢棄的標簽IE6 bug，和一些定位寫法css js放置位置和原因...

    stormgens 評論0 收藏0

  • 2018 淺談前端面試那些事

    摘要：聲明的變量不得改變值，這意味著，一旦聲明變量，就必須立即初始化，不能留到以后賦值。 雖然今年沒有換工作的打算 但為了跟上時代的腳步 還是忍不住整理了一份最新前端知識點 知識點匯總 1.HTML HTML5新特性，語義化瀏覽器的標準模式和怪異模式xhtml和html的區別使用data-的好處meta標簽canvasHTML廢棄的標簽IE6 bug，和一些定位寫法css js放置位置和原因...

    Hujiawei 評論0 收藏0

  • 淺談網頁基本性能優化規則小結

    摘要：雪碧圖內聯圖片將站內小圖標合并成一張圖，使用定位截取對應圖標適當使用內聯圖片。瀏覽器緩存合理設置瀏覽器緩存是網頁優化的重要手段之一。為什么要減少請求在性能優化中減少請求的措施占了很大部分，比如使用雪碧 這篇文章主要介紹了淺談網頁基本性能優化規則小結的相關資料，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧 針對瀏覽器網頁的一些優化規則 頁面優化 靜態資源壓縮...

    Aomine 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<