前端Tank技能---頁面load事件分析

silencezwm 發布于2019-08-22 11:02 / 543人閱讀

摘要：事件詳細研究邊界事件外鏈樣式在某些瀏覽器下面會影響腳本的加載。事件和事件是同時的。這就是要監聽頁面的事件，當事件為時就可以開始做的事情了。

頁面加載狀態

$(document).ready()

$(function(){})

這兩個是我們在頁面初始化時經常使用的監聽方案，那么他的實際的執行關系時什么樣的呢？在原生js中是什么樣的一種表現？

以下我會一而再再而三的寫DOMContentLoaded,因為好多同學都沒有怎么聽說過這個事件

onload vs DOMContentLoaded

定義

onload:
當onload事件觸發的時候，頁面上的所有dom，樣式表，腳本，圖片，flash都已經加載完成了

DOMContentLoaded:
當DOMContentLoaded事件觸發時，僅當dom加載完成，不包括樣式表，圖片，flash

光看定義，一目了然，哪個比較適合作為我們判斷的標準：圖片啊什么的，我們完全可以不用等。

DOMContentLoaded事件詳細研究

DOMContentLoaded邊界事件

外鏈樣式在某些瀏覽器下面會影響腳本的加載。

在某些Gecko和Webkit引擎版本的瀏覽器里面，&&IE8在內，會同時發起多個http的請求并行加載樣式表和腳步，但是腳本會等樣式表加載完成之后才會被執行，甚至樣式表加載之前頁面都不會渲染。opera不會，樣式表未加載好就可以執行js。

DOMContentLoaded兼容性

DOMContentLoaded事件兼容處理方案

由上可知，DOMContentLoaded事件在ie9以下是不支持的，那么慣例，我們要開始搞兼容處理方案
ie8及以下兼容處理方案
ie的一般處理方案

html加載過程中會有一個document.readyState狀態

五種狀態：
0（未初始化）：還沒有send
1 loading（載入）：正在發送請求
2 loaded（載入完成）：執行完成，已經接收到全部響應內容
3 interactive（交互）：正在解析響應內容
4 complete（完成）：響應內容解析完成，客戶端可以用了。

complete事件和window.onload事件是同時的。

這就是要監聽頁面的readystatechange事件，當事件為interactive||complete時就可以開始做js的事情了。
帶iframe的處理

但是當頁面中帶有iframe時，這個readyState狀態會掛起一直等待，等待頁面的iframe也加載完畢之后再處理，這個過程是我們不想要得，那就有另外一種處理方案

        (function doScrollCheck(){
            try{
                temp.doScroll("left");
                result += "ie scroll" + (new Date()).getTime()+"
";
            } catch(e){
                return setTimeout(doScrollCheck, 50);
            }
        }());

doScroll事件在頁面加載完成之前是不能調用的，調用就失敗了，可以用try catch的方法來完成

jQuery處理方案

基本上說清楚了，那么我們來看看jQuery是怎么搞的吧

        jQuery.ready.promise = function( obj ) {
            if ( !readyList ) {

                readyList = jQuery.Deferred();

                //如果執行到此處時，document.readyState已經是complete，就可以是ready了
                if ( document.readyState === "complete" ) {
                    setTimeout( jQuery.ready );
                
                //標準處理方案，DOMContentLoaded,一般瀏覽器都有的。
                } else if ( document.addEventListener ) {
                    //事件監聽
                    document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );

                    // 做個備份，不管怎么樣，load事件時一定一定會執行的
                    window.addEventListener( "load", jQuery.ready, false );

                // ie處理方案
                } else {
                    //這個時間比doscroll事件快好多，他會在交互狀態就觸發，見demo2
                    document.attachEvent( "onreadystatechange", DOMContentLoaded );

                    // 還是備份
                    window.attachEvent( "onload", jQuery.ready );

                    // 且沒有iframe的方案
                    var top = false;

                    try {
                        top = window.frameElement == null && document.documentElement;
                    } catch(e) {}

                    if ( top && top.doScroll ) {
                        (function doScrollCheck() {
                            if ( !jQuery.isReady ) {

                                try {
                                    
                                    top.doScroll("left");
                                } catch(e) {
                                    return setTimeout( doScrollCheck, 50 );
                                }
                                jQuery.ready();
                            }
                        })();
                    }
                }
            }
            return readyList.promise( obj );
        };

這就是我們常用的ready事件

敬請期待下期，defer sync 各種各種和loaded DOMContentLoaded事件的關系

云服務器 GPU云服務器 load事件前端技能前端技能樹前端開發技能

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

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

前端Tank技能---頁面load事件分析

摘要：事件詳細研究邊界事件外鏈樣式在某些瀏覽器下面會影響腳本的加載。事件和事件是同時的。這就是要監聽頁面的事件，當事件為時就可以開始做的事情了。頁面加載狀態 $(document).ready() $(function(){}) 這兩個是我們在頁面初始化時經常使用的監聽方案，那么他的實際的執行關系時什么樣的呢？在原生js中是什么樣的一種表現？以下我會一而再再而三的寫DOMConten...

lpjustdoit 2019-08-01 15:33 評論0 收藏0
前端Tank技能---瀏覽器嗅探

摘要：由于那個時候是霸主，這也導致微軟推出的時候必須把自己偽裝成瀏覽器，于是他們的也是以開頭的。各個版本典型的如下其中之后的就是當前的版本號。的幾個版本的其中之后的是版本號提供了專門的瀏覽器標志，就是屬性。目前，的是其中，版本號在之后的數字。瀏覽器嗅探瀏覽器嗅探不用說了，為了更好的性能，會需要各種各樣的兼容性處理，自然就會有針對不同瀏覽器的判斷.一般的代碼中，我們都是通過navigato...

Blackjun 2019-08-19 18:32 評論0 收藏0
前端Tank技能---模塊化加載器的簡單實現

摘要：拋開一直寫的那個不講，我們說的是一個簡單的模塊加載器的簡單實現。非常好實現，忽略不提。是第一個冒出來的，但是，一般提到他都會是棄用的，會有安全的漏洞更好的方案是構造器。什么是模塊化，為什么要模塊化裝個b，貼一段English A beginning programmer writes her programs like an ant builds her hill, one pie...

ShevaKuilin 2019-08-19 18:31 評論0 收藏0
前端相關大雜燴

摘要：希望幫助更多的前端愛好者學習。前端開發者指南作者科迪林黎，由前端大師傾情贊助。翻譯最佳實踐譯者張捷滬江前端開發工程師當你問起有關與時，老司機們首先就會告訴你其實是個沒有網絡請求功能的庫。前端基礎面試題(JS部分) 前端基礎面試題(JS部分) 學習 React.js 比你想象的要簡單原文地址：Learning React.js is easier than you think 原文作...

fuyi501 2019-08-22 13:46 評論0 收藏0
threejs構建web三維視圖入門教程

摘要：本文是一篇簡單的構建三維視圖的入門教程，你可以了解到利用創建簡單的三維圖形，并且控制圖形運動。然后將其加入到中。三創建對象大多數時候，我們需要講繪制的圖形整合到一起進行控制。在軸上運動的完整代碼這個入門教程就到這里了，感謝閱讀。本文是一篇簡單的webGL+threejs構建web三維視圖的入門教程，你可以了解到利用threejs創建簡單的三維圖形，并且控制圖形運動。若有不足，歡迎指出...

Profeel 2019-08-21 10:43 評論0 收藏0