【HTML5】DOMContentLoaded事件

最新推荐文章于 2021-12-08 17:55:54 发布

湉湉老爸

最新推荐文章于 2021-12-08 17:55:54 发布

阅读量446

点赞数

分类专栏： J2EE

J2EE 专栏收录该内容

104 篇文章 1 订阅

订阅专栏

这个事件是从HTML中的onLoad的延伸而来的，当一个页面完成加载时,初始化脚本的方法是使用load事件，但这个类函数的缺点是仅在所有资源都完全加载后才被触发,这有时会导致比较严重的延迟,开发人员随后创建了一种自定义事件,domready,它在DOM加载之后及资源加载之前被触发。

domready事件迅速被众多JavaScript库所采用,它开始在本地浏览器中以DOMContentLoaded的形式被使用;此外,它目前已在HTML5中被标准化,下面的代码显示了DOMContentLoaded是如何在document对象中被触发的;
document.addeventListener('DOMContentLoaded',function(){...},false);

DOMContentLoaded 与 onload 的不同之处在于 DOMContentLoaded 发生在 DOM 加载完毕，但是图片等可能未加载完成的情况。DOMContentLoaded 被除IE外的浏览器支持。针对IE浏览器，也可以模拟这个事件，有两种方案
1、在页面加一个标签

    Html代码   
    
 <script src="//:" defer />

    Html代码   
    
  
 <script type="text/javascript">  
 //<![CDATA[ 
   var $ = document.getElementById; 
   var fireDOMReadyEvent = function () { 
     alert('DOM content loaded'); 
   } 
   if (!!window.ActiveXObject) {  
     // Internet Explorer use defer attribute 
     var src = (window.location.protocol == 'https') ? '://0' : 'javascript:void(0)';  
      document.write('<SCRIPT id=____dom_content_ready__ src="' + src + '" defer><\/script>');  
      $('____dom_content_ready__').onreadystatechange = function() {  
         if (this.readyState == 'complete') {  
             this.onreadystatechange = null;  
              fireDOMReadyEvent();  
          }  
      };  
  }  
 //]]>  
 </script>  
  <body>  
     <img src="verybig.jpg">  
  </body>  

然后检测该脚本的 onreadystatechange，如果为 complete 说明此时 DOM 加载完毕，即 DOMContentLoaded 事件发生。用 Http watch 工具可以看到像早些版本的 JQuery 和 ExtJS 都会发这么一个请求。最后再删除这个标签即可。一般这个请求花费几毫秒时间。
2、通过setTiemout来不断的调用documentElement的doScroll方法，如果调用成功则相当 DOMContentLoaded 事件发生。

    Html代码   
    
  
 <script type="text/javascript">  
 //<![CDATA[ 
   var $ = document.getElementById; 
   var fireDOMReadyEvent = function () { 
     window.clearInterval(timer) 
     alert('DOM content loaded'); 
   } 
   if (!!window.ActiveXObject) {  
     // Using doScroll method to instead of script tag to deal with DOM content loaded event 
     var timer = null; 
     try { 
       timer = setInterval(function () { 
         document.body.doScroll('left'); 
         fireDOMReadyEvent(); 
       }); 
     } catch(ex) {}; 
  }  
 //]]>  
 </script>  
 <img src="verybig.jpg">  

湉湉老爸

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【HTML5】DOMContentLoaded事件

这个事件是从HTML中的onLoad的延伸而来的，当一个页面完成加载时,初始化脚本的方法是使用load事件，但这个类函数的缺点是仅在所有资源都完全加载后才被触发,这有时会导致比较严重的延迟,开发人员随后创建了一种自定义事件,domready,它在DOM加载之后及资源加载之前被触发。domready事件迅速被众多JavaScript库所采用,它开始在本地浏览器中以DOMContentLoad
复制链接

扫一扫