前端Tank技能---頁(yè)面load事件分析

silencezwm 發(fā)布于2019-08-22 11:02 / 560人閱讀

摘要：事件詳細(xì)研究邊界事件外鏈樣式在某些瀏覽器下面會(huì)影響腳本的加載。事件和事件是同時(shí)的。這就是要監(jiān)聽頁(yè)面的事件，當(dāng)事件為時(shí)就可以開始做的事情了。

頁(yè)面加載狀態(tài)

$(document).ready()

$(function(){})

這兩個(gè)是我們?cè)陧?yè)面初始化時(shí)經(jīng)常使用的監(jiān)聽方案，那么他的實(shí)際的執(zhí)行關(guān)系時(shí)什么樣的呢？在原生js中是什么樣的一種表現(xiàn)？

以下我會(huì)一而再再而三的寫DOMContentLoaded,因?yàn)楹枚嗤瑢W(xué)都沒有怎么聽說過這個(gè)事件

onload vs DOMContentLoaded

定義

onload:
當(dāng)onload事件觸發(fā)的時(shí)候，頁(yè)面上的所有dom，樣式表，腳本，圖片，flash都已經(jīng)加載完成了

DOMContentLoaded:
當(dāng)DOMContentLoaded事件觸發(fā)時(shí)，僅當(dāng)dom加載完成，不包括樣式表，圖片，flash

光看定義，一目了然，哪個(gè)比較適合作為我們判斷的標(biāo)準(zhǔn)：圖片啊什么的，我們完全可以不用等。

DOMContentLoaded事件詳細(xì)研究

DOMContentLoaded邊界事件

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

在某些Gecko和Webkit引擎版本的瀏覽器里面，&&IE8在內(nèi)，會(huì)同時(shí)發(fā)起多個(gè)http的請(qǐng)求并行加載樣式表和腳步，但是腳本會(huì)等樣式表加載完成之后才會(huì)被執(zhí)行，甚至樣式表加載之前頁(yè)面都不會(huì)渲染。opera不會(huì)，樣式表未加載好就可以執(zhí)行js。

DOMContentLoaded兼容性

DOMContentLoaded事件兼容處理方案

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

html加載過程中會(huì)有一個(gè)document.readyState狀態(tài)

五種狀態(tài)：
0（未初始化）：還沒有send
1 loading（載入）：正在發(fā)送請(qǐng)求
2 loaded（載入完成）：執(zhí)行完成，已經(jīng)接收到全部響應(yīng)內(nèi)容
3 interactive（交互）：正在解析響應(yīng)內(nèi)容
4 complete（完成）：響應(yīng)內(nèi)容解析完成，客戶端可以用了。

complete事件和window.onload事件是同時(shí)的。

這就是要監(jiān)聽頁(yè)面的readystatechange事件，當(dāng)事件為interactive||complete時(shí)就可以開始做js的事情了。
帶iframe的處理

但是當(dāng)頁(yè)面中帶有iframe時(shí)，這個(gè)readyState狀態(tài)會(huì)掛起一直等待，等待頁(yè)面的iframe也加載完畢之后再處理，這個(gè)過程是我們不想要得，那就有另外一種處理方案

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

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

jQuery處理方案

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

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

                readyList = jQuery.Deferred();

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

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

                // ie處理方案
                } else {
                    //這個(gè)時(shí)間比doscroll事件快好多，他會(huì)在交互狀態(tài)就觸發(fā)，見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事件

敬請(qǐng)期待下期，defer sync 各種各種和loaded DOMContentLoaded事件的關(guān)系

云服務(wù)器 GPU云服務(wù)器 load事件前端技能前端技能樹前端開發(fā)技能

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

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

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

登陸后可評(píng)論

0條評(píng)論

silencezwm

男|高級(jí)講師

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

TA的文章

#yyds干貨盤點(diǎn)#k8s Service 資源及其模型

閱讀 1157·2021-11-25 09:43
Shockhosting：日本東京機(jī)房上線，送中國(guó)用戶10刀余額，2核/2G套餐月付$9.9

閱讀 1677·2021-09-13 10:25
BuyVM：新增解鎖流媒體VPS主機(jī),1Gbps不限流量$5/月起

閱讀 2638·2021-09-09 11:38
UnixBench：Linux VPS服務(wù)器性能測(cè)試跑分腳本

閱讀 3447·2021-09-07 10:14
深入新版BS4源碼探索flex和工程化sass奧秘

閱讀 1745·2019-08-30 15:52
2019js基礎(chǔ)面試題整理復(fù)習(xí)

閱讀 675·2019-08-30 15:44
ES6學(xué)習(xí)筆記（二）--------------------------------------變量

閱讀 3613·2019-08-29 13:23
一面

閱讀 2007·2019-08-26 13:33

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

資訊專欄INFORMATION COLUMN

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

前端Tank技能---頁(yè)面load事件分析

相關(guān)文章