JavaScript DOM-Ready 机制

最新推荐文章于 2023-10-09 13:22:13 发布

weixin_30348519

最新推荐文章于 2023-10-09 13:22:13 发布

阅读量121

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/xf_z1988/p/javascript_dom_ready.html

IE9开始和其他现代浏览器可以通过绑定DOMContentLoaded事件；
IE9之前的的浏览器需要绑定onreadystatechange事件并等待readyState为"complete"来判断；
此外IE9之前的浏览器还可以通过不停地执行document.documentElement.doScroll("left")直到不抛出异常来判断。

IE还可以通过<script>脚本设置属性defer="defer"，并判断该脚本的onreadystatechange事件来触发DOM-Ready。

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5 <style rel="stylesheet" type="text/css">
  6 </style>
  7 <script type="text/javascript">
  8 setTimeout(function(){
  9     
 10     // 事件队列.
 11     var readyFns;
 12     // 标记状态.fireReady触发时设置为true.
 13     var isReady=false;
 14 
 15     // 添加监听事件或马上执行.
 16     window.ready=function(fn){
 17         initReady();
 18         if(isReady){
 19             fn();
 20         }
 21         else{
 22             readyFns.push(fn);
 23         }
 24     };
 25     // 触发DOM-Ready事件.
 26     function fireReady(){
 27         // 只执行一次.
 28         if(isReady){
 29             return;
 30         }
 31         isReady=true;
 32         // 遍历执行.
 33         if(readyFns){
 34             for(var i=0,fn;fn=readyFns[i++];){
 35                 fn();
 36             }
 37             // 清空事件.
 38             readyFns.length=0;
 39         }
 40     }
 41     // IE678下判断DOM是否加载完毕.
 42     function doscrollcheck(){
 43         try{
 44             document.documentElement.doScroll("left");
 45             document.title+="doscroll";
 46             fireReady();
 47         }
 48         catch(e){
 49             setTimeout(doscrollcheck,1);
 50         }
 51     }
 52     // 初始化监听.
 53     function initReady(){
 54         if(readyFns){
 55             return;
 56         }
 57         readyFns=[];
 58         // 添加事件绑定.
 59         if(document.addEventListener){
 60             document.title+="W3C";
 61             document.addEventListener("DOMContentLoaded",function(){
 62                 document.removeEventListener("DOMContentLoaded",arguments.callee,false);
 63                 fireReady();
 64             },false);
 65         }
 66         else if(document.attachEvent){
 67             document.title+="IE678";
 68             document.attachEvent("onreadystatechange",function(){
 69                 if(document.readyState==="complete"){
 70                     document.detachEvent("onreadystatechange",arguments.callee);
 71                     fireReady();
 72                 }
 73             });
 74             document.attachEvent("onload",function(){
 75                 document.title="onload";
 76                 fireReady()
 77             });
 78             // 顶层窗口还可以检测doScrollCheck方法来检测是否可以触发ready事件
 79             if(document.documentElement.doScroll){
 80                 // 是否为顶层窗口.
 81                 if(self===self.top){
 82                     doscrollcheck();
 83                 }
 84             }
 85         }
 86     }
 87     // 如果是动态加载上面的脚本.则应该判断是否完成.
 88     (function(){
 89         if(document.readyState==="complete"){
 90             document.body.innerHTML+="document.readyState loaded";
 91             fireReady();
 92         }
 93     })();
 94 
 95     // 测试.
 96     ready(function(){
 97     document.body.innerHTML+="1";
 98     });
 99     ready(function(){
100         document.body.innerHTML+="2";
101     });
102     ready(function(){
103         document.body.innerHTML+="3";
104     });
105 },0);// 调整延迟来模拟"动态加载该DOM-Ready的情况"
106 
107 
108 setTimeout(function(){
109     ready(function(){
110         document.body.innerHTML+="4";
111     });
112 },1000);
113 window.onload=function(){
114     document.body.innerHTML+="loaded";
115 };
116 
117 </script>
118 </head>
119 <body><img src="http://1.su.bdimg.com/skin_zoom/38.jpg" style="width:10px;height:10px;" /></body>
120 </html>