亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

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

silencezwm / 590人閱讀

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

頁面加載狀態(tài) 
$(document).ready()

$(function(){})

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

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

onload vs DOMContentLoaded

定義

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

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

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

DOMContentLoaded事件詳細研究

DOMContentLoaded邊界事件

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

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

DOMContentLoaded兼容性

DOMContentLoaded事件兼容處理方案

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

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

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

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

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

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

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

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

jQuery處理方案

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

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

                readyList = jQuery.Deferred();

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

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

                // ie處理方案
                } else {
                    //這個時間比doscroll事件快好多，他會在交互狀態(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事件

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

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

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/91652.html

相關(guān)文章

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

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

    lpjustdoit 評論0 收藏0

  • 前端Tank技能---瀏覽器嗅探

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

    Blackjun 評論0 收藏0

  • 前端Tank技能---模塊化加載器的簡單實現(xiàn)

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

    ShevaKuilin 評論0 收藏0

  • 前端相關(guān)大雜燴

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

    fuyi501 評論0 收藏0

  • threejs構(gòu)建web三維視圖入門教程

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

    Profeel 評論0 收藏0

發(fā)表評論

0條評論

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