也许还有朋友不太清楚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. 浅析js模板引擎

    js模板引擎越来越多的得到应用,如今已经出现了几十种js模板引擎,国内各大互联网公司也都开发了自己的js模板引擎(淘宝的kissy template,腾讯的artTemplate,百度的baiduTe ...

  2. 神经网络工具箱nntool的使用方法

    关于如何使用nntool神经网络工具箱进行“数据训练”的方法: 1. 在命令窗口键入nntool命令打开神经网络工具箱: 2. 点击Import按钮两次,分别把输入向量和目标输出加入到对应的窗口([I ...

  3. HTML+CSS Day10实例

    1.家居大视野 效果图: 代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...

  4. Android jni编辑.so库

    引自:http://www.cnblogs.com/sevenyuan/p/4202759.html 1. 在Eclipse中创建项目:TestJNI 2. 新创建一个class:TestJNI.ja ...

  5. db2安装要设置tcp、ip

    1.注册表变量DB2COMM是否已经设置了值,是什么级别的?db2set -all | grep -i "DB2COMM" (in unix like os)db2set -all ...

  6. 牛顿迭代法解指数方程（aX + e^x解 = b )

    高中好友突然问我一道这样的问题,似乎是因为他们专业要做一个计算器,其中的一道习题是要求计算器实现这样的功能. 整理一下要求:解aX + e^X = b 方程.解方程精度要求0.01,给定方程只有一解, ...

  7. POJ 3419 Difference Is Beautiful

    先处理出每一个i位置向左最远能到达的位置L[i].每一次询问,要找到L,R区间中的p位置,p位置左边的L[i]都是小于L的,p位置开始,到R位置,L[i]都大于等于L,对于前者,最大值为p-L,后者求 ...

  8. 用jQuery写的最简单的表单验证

    近几天完成了关于我们项目的最简单的表单验证,是用jQuery写的,由于之前也一直没学过jQuery,所以自己也是一直处于边摸索边学习的阶段,经过这一段时间的学习,通过查资料啥的,也发现了学习jQuer ...

  9. Spring Bean 生命周期

    转自:也谈Spring Bean的生命周期 开篇先用一张老图描述下Spring中Bean容器的生命周期. 插叙一下,记得某个博文中提到:“Spring的Bean容器只管理非单例Bean的生命周期,单例 ...

  10. CSS3秘笈：第三章

    1.标签选择器:控制整体. 使用标签选择器,只需要输入标签的名称即可. 2.类选择器:精确控制. 假如你要指定一些相同的元素拥有不同的样式,可以给元素添加不同的类名,然后用类选择器来应用对应的样式. ...