也许还有朋友不太清楚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. Oracle SQL 内置函数大全

    SQL中的单记录函数 1.ASCII 返回与指定的字符对应的十进制数;SQL> select ascii('A') A,ascii('a') a,ascii('0') zero,ascii(' ...

  2. 计算机网络分层（OSI七层、 TCP/IP四层）

  3. 安装、配置、启动FTP、SSH或NFS服务

    (1)准备使用软件维护工具apt-get. Ubuntu7.10中没有安装FTP.SSH.NFS服务器软件,它提供了一个很方便的安装.升级.维护软件的工具apt-get.apt-get从光盘.网络上下 ...

  4. js 手动轮播和自动轮播

    $(function(){ //默认值 $("#carousel1").css("background-color","#FFF"); // ...

  5. .net core 读取配置文件

    /// <summary> /// 读取配置信息 /// </summary> public class Zconfig { #region 读取配置信息 /// <su ...

  6. [转载]Linux 环境下编译 0.11版本内核 kernel

    最近在看<.如果Clobber/Modify 为空,则其前面的冒号(:)必须省略. 2.如果Output,Input,Clobber/Modify都为空,Output,Input之前的冒号(:) ...

  7. 当引用了Properties.Settings后,如果执行的时候,出现"配置系统无法初始化" 或者 某某节点不正确

    自定义了一个 PowerConfig命名空间   PowerSettings.Settings 然后一个exe,引用了该dll,在app.cinfig里增加了配置项 <applicationSe ...

  8. hdu_4823_Energy Conversion

    题目连接:http://acm.hdu.edu.cn/showproblem.php?pid=4823 题意:中文题,很清楚,要注意的是乘起来会爆int 题解: #include<cstdio& ...

  9. HDU1379:DNA Sorting

    Problem Description One measure of ``unsortedness'' in a sequence is the number of pairs of entries ...

  10. OpenCV ——背景建模之CodeBook(1)

    1,CodeBook算法流程介绍 CodeBook算法的基本思想是得到每个像素的时间序列模型.这种模型能很好地处理时间起伏,缺点是需要消耗大量的内存.CodeBook算法为当前图像的每一个像素建立一个 ...