Dom頁面加載

時間 2019-12-14
標籤 dom 頁面加載欄目 HTML 简体版
原文原文鏈接
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Dom頁面加載完成</title>
 6 </head>
 7 <body>
 8     <!-- 
 9 
10     在實際應用中，咱們常常會遇到這樣的場景，當頁面加載完成後去作一些事情：綁定事件、DOM操做某些結點等。
11     原來比較經常使用的是window的onload 事件，而該事件的實際效果是：當頁面解析/DOM樹創建完成，並完成了諸如圖片、腳本、樣式表甚至是iframe中全部資源的下載後才觸發的。
12     這對於不少 實際的應用而言有點太「遲」了，比較影響用戶體驗。
13     爲了解決這個問題，ff中便增長了一個DOMContentLoaded方法，與onload相比，該 方法觸發的時間更早，它是在頁面的DOM內容加載完成後即觸發，而無需等待其餘資源的加載。
14     Webkit引擎從版本525（Webkit nightly 1/2008:525+）開始也引入了該事件，Opera中也包含該方法。到目前爲止主流的IE仍然沒有要添加的意思。雖然IE下沒有，但老是有解決辦法 的，這篇文章對比了一下幾大主流框架對於該事件的兼容性版本實現方案，涉及的框架包括：
15     1. Prototype 2. jQeury 3. moontools 4. dojo 5. yui 6. ext
16     最後總結各大框架的Polyfill方法，能夠獲得以下一個函數
17 
18      -->
19 </body>
20 
21 <script>
22     /*
23     *註冊瀏覽器的DOMContentLoaded事件
24     *@param { Function } onready [必填]在DOMContentLoaded事件觸發時須要執行的函數
25     *@param { Object } config [可選]配置項
26     */
27 
28     function onDOMContentLoaded(onready,config){
29         //瀏覽器檢測相關對象，在此爲節省代碼未實現，實際使用時須要實現。
30         //var Browser = {};
31         //設置是否在FF下使用DOMContentLoaded（在FF2下的特定場景有Bug）
32         this.conf = {
33             enableMozDOMReady:true
34         };
35         if( config )
36             for( var p in config)
37                 this.conf[p] = config[p];
38         var isReady = false;
39         function doReady(){
40             if( isReady ) return;
41             //確保onready只執行一次
42             isReady = true;
43             onready();
44         }
45         /*IE*/
46         if( Browser.ie ){
47             (function(){
48                 if ( isReady ) return;
49                 try {
50                     document.documentElement.doScroll("left");
51                 } catch( error ) {
52                     setTimeout( arguments.callee, 0 );
53                     return;
54                 }
55                 doReady();
56             })();
57             window.attachEvent('onload',doReady);
58         }
59         /*Webkit*/
60         else if (Browser.webkit && Browser.version < 525){
61             (function(){
62                 if( isReady ) return;
63                 if (/loaded|complete/.test(document.readyState))
64                     doReady();
65                 else
66                     setTimeout( arguments.callee, 0 );
67             })();
68             window.addEventListener('load',doReady,false);
69         }
70         /*FF Opera 高版webkit 其餘*/
71         else{
72             if( !Browser.ff || Browser.version != 2 || this.conf.enableMozDOMReady)
73                 document.addEventListener( "DOMContentLoaded", function(){
74                     document.removeEventListener( "DOMContentLoaded", arguments.callee, false );
75                     doReady();
76                 }, false );
77             window.addEventListener('load',doReady,false);
78         }
79     }
80 
81 
82 
83 
84 </script>
85 </html>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。