zoukankan      html  css  js  c++  java
  • JavaScript DOM-Ready 机制

    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="10px;height:10px;" /></body>
    120 </html>

    参考司徒正美的一篇博客:javascript的domReady

  • 相关阅读:
    CSS3—— 2D转换 3D转换 过渡 动画
    CSS3——边框 圆角 背景 渐变 文本效果
    CSS3——表单 计数器 网页布局 应用实例
    CSS3——提示工具 图片廓 图像透明 图像拼接技术 媒体类型 属性选择器
    CSS3——对齐 组合选择符 伪类 伪元素 导航栏 下拉菜单
    CSS3——分组和嵌套 尺寸 display显示 position定位 overflow float浮动
    CSS3——盒子模型 border(边框) 轮廓(outline)属性 margin外边距 padding填充
    Eclipse连接数据库报错Local variable passwd defined in an enclosing scope must be final or effectively final
    数据库——单表查询
    数据库——添加,修改,删除
  • 原文地址:https://www.cnblogs.com/xf_z1988/p/javascript_dom_ready.html
Copyright © 2011-2022 走看看