也许还有朋友不太清楚DOMContentLoaded这个事件。简单的说，这个事件就是要在大多数情况下去替代window.onload事件，因为window.onload事件必须要等待页面所有元素的资源都下载完毕时才触发。
这个事件实际是上w3c推荐的标准事件，是在DOM树建成的时候触发，因此要比onload事件快很多。ff, opera高版本已经支持了该事件。而IE在IE8里依然没有想加这个事件的意思，为了实现IE与w3c的兼容，我们有必要为IE做一件“好事”。

一般是两种方法。

  • 一种是创建空script标签，属性拥有defer，然后待onreadystatechange为complete时激发DOMContentLoaded
  • 一种是通过调用doScroll('left')的原理去判断DOMContentLoaded

第一种方法

<script type="text/javascript">//<![CDATA[
  var $ = document.getElementById;
  var fireDOMReadyEvent = function () {
    alert('DOM content loaded----------------http://www.never-online.net/blog/');
  }
  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="http://img9.zol.com.cn/desk_pic/big_304/303619.jpg">
 </body>

看上去应该没有什么问题了。但实际在使用当中还是遇到不少的问题，主要是协议，还有iframe。https协议需要单独判断。
iframe的问题在Jerry使用的时候发现比较大的问题，比如

<script type="text/javascript">//<![CDATA[
  var $ = document.getElementById;
  var fireDOMReadyEvent = function () {
    alert('DOM content loaded----------------http://www.never-online.net/blog/');
  }
  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>
<iframe src="http://www.csdn.net"></iframe>

它会在iframe加载完毕的时候才触发事件，显然不是我们所需要的。

也因为如此，我们现在很流行第二种方案：用doScroll方法。这主要是利用doScroll是是DOM树形成之后才可以操作。

<script type="text/javascript">//<![CDATA[
  var $ = document.getElementById;
  var fireDOMReadyEvent = function () {
    window.clearInterval(timer)
    alert('DOM content loaded----------------http://www.never-online.net/blog/');
  }
  if (!!window.ActiveXObject) { 
    // Using doScroll method to instead of script tag to deal with DOM content loaded event
    var timer = null;
    
    timer = setInterval(function () {
      try {
        document.body.doScroll('left');
        fireDOMReadyEvent();
      } catch(ex) {};
    });
    
 } 
//]]></script>
<iframe src="http://www.csdn.net"></iframe>
<img src="http://img9.zol.com.cn/desk_pic/big_304/303619.jpg">

以前听同事提过在YUI里有两种ready事件，一种是DOMContentLoaded，一种是ElementReadyContentReady(怿飞提醒，修正）。还没有详细的去看代码，有兴趣的朋友也可看一下。

今天顺便看了一下YUI，判断DOMContentLoaded，大概是这样。

var p = document.createElement('p');
p.doScroll('left');
fireDOMLoadedHandle();

个人认为此方法有一个问题，p在IE6下是不会释放的，所以会有memory leak。

而mootools里的方法也是有问题的：

 var el = document.createElement('div');
 document.body.appendChild(el);
 el.innerHTML = "left";
 el.parentNode.removeChild(el);
 clearInterval(interval);
 ready();

IE6下假如是在body未在加完之前运行会有，HTML无法结束的警告。（具体出错信息记不清了-_-!）

关于DOMContentLoaded的更多相关文章

  1. 谈谈DOMContentLoaded：Javascript中的domReady引入机制

    一.扯淡部分 回想当年,在摆脱写页面时js全靠从各种DEMO中copy出来然后东拼西凑的幽暗岁月之后,毅然决然地打算放弃这种处处“拿来主义”的不正之风,然后开启通往高大上的“前端攻城狮”的飞升之旅.想 ...

  2. 事件DOMContentLoaded和load的区别

    1.当 onload 事件触发时,页面上所有的DOM,样式表,脚本,图片,flash都已经加载完成了. 2.当 DOMContentLoaded 事件触发时,仅当DOM加载完成,不包括样式表,图片,f ...

  3. window.onload 和 DOMContentLoaded区别及如何判断dom是否加载完毕

    http://blog.allenm.me/2010/02/window-onload-和-domcontentloaded/ 其中使用IE不支持DOMContentLoaded,那么判断IE是否加载 ...

  4. DOMContentLoaded实现

    IE系列直到IE9才支持DOMContentLoaded事件,对于IE8及其之前版本,如果html内没有框架,则可以采用document.documentELement.doScroll来判断 是否构 ...

  5. window.onload、DOMContentLoaded和$(document).ready()

    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="C ...

  6. DOMContentLoaded和load

    /* * IE9以及现代浏览器新增了一个DOM构建完毕的事件DOMContentLoaded, * 这个事件触发的时间要比load快, * 因为这个事件只涉及DOM的构建,不涉及其他资源的加载. * ...

  7. DOMContentLoaded和jquery的ready和window.onload的顺序

    document.addEventListener('DOMContentLoaded', function(){ alert(1) }); window.onload=function(){ ale ...

  8. HTML5中的DOMContentLoaded 和 touchmove

    Html5的出现确实解决了一部分页面交互的问题,同时它的一些特性还是没能被我们掌握,今天主要聊聊Html5中的DomcontenLoaded和touchmove事件的属性和使用: DomcontenL ...

  9. 利用doScroll在IE浏览器里模仿DOMContentLoaded

    稍微了解一点框架的事件绑定的都知道 window.onload 事件需要在页面所有内容(包括图片.flash.iframe等)加载完后,才执行,但往往我们更希望在 DOM 一加载完就执行脚本,而各大框 ...

  10. DOMContentLoaded事件

    今天查看百度空间源代码,发现多了个util.js文件,打开看看.里面里面定义了addDOMLoadEvent.这是干什么用的? 仔细查看代码,发现在Mozilla添加了DOMContentLoaded ...

随机推荐

  1. AS3.0杂记——Dictionary、Object与Array

    来源:http://blog.csdn.net/m_leonwang/article/details/8811829 Object.Array与Dictionary都是关联数组,就是用“键”来索引存储 ...

  2. Raft详解-启动后运行期间代码

    Raft启动后运行期间主要执行两个函数:1.状态监测和转化 func (rf *Raft) Loop() { // Set out as a follower TimeOutConst := 0 fo ...

  3. Hibernate中自带ID的generator的含义

    increment:代理主键,适合于所有数据库,由hibernate维护主键自增,和底层数据库无关,但是不适合于2个或以上hibernate进程. identity:代理主键,适合于Mysql或ms ...

  4. CFNetwork SSLHandshake failed (-9824) ios 9

    设置 NSAppTransportSecurity

  5. 基于PXE的Centos无人值守安装（Win平台）

    一.环境准备 PXE服务器端 1.工具 tftpd32 (下载)用于提供DHCP和ftp服务 hfs   (下载)     用于提供安装软件的http方式下载 Kickstart           ...

  6. mysql基本操作 [http://www.cnblogs.com/ggjucheng/archive/2012/11/03/2752082.html]

    创建表 简单的方式 CREATE TABLE person ( number INT(11), name VARCHAR(255), birthday DATE ); 或者是 CREATE TABLE ...

  7. Screen tearing

    Umm, screen tearing happens when the frame rate and the monitor refresh rate don't match.  When that ...

  8. html5学习（二）音频audio

    音频格式 当前,audio 元素支持三种音频格式:   IE 9 Firefox 3.5 Opera 10.5 Chrome 3.0 Safari 3.0 Ogg Vorbis   √ √ √   M ...

  9. iOS自定制tabbar与系统的tabbar冲突,造成第一次点击各个item图片更换选中,第二次选中部分item图片不改变

    可以选择是使用自定制的还是系统的,如果使用自定制的,就使用以下方法即可隐藏系统的uitabbarButton,从而使item恢复正确 //隐藏UITabBarButton -(void)viewWil ...

  10. python自动化测试

    python自动化测试 欢迎光临 python自动化测试 小站! 小站基于IT行业,重点关注python,软件自动化测试,测试等. 联系方式 飞信 372818219 相关的群:python开发自动化 ...