也许还有朋友不太清楚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. 第四题 （List）写一个函数reverseList，该函数能够接受一个List，然后把该List 倒序排列。 例如：  List list = new ArrayList();  list.add(“Hello”);  list.add(“World”);  list.add(“Learn”); //此时list 为Hello World Learn  r

    package zuoye; import java.util.ArrayList; import java.util.List; public class Reverse01 { public st ...

  2. 创建mysql数据表成功

    create table picindex(id int NOT NULL AUTO_INCREMENT,userName varchar(255) NOT NULL,cur int(11) NOT ...

  3. GitHub上有很多不错的iOS开源项目

    GitHub上有很多不错的iOS开源项目,个人认为不错的,有这么几个:1. ReactiveCocoa:ReactiveCocoa/ReactiveCocoa · GitHub:GitHub自家的函数 ...

  4. CocoaPods安装、卸载、使用说明(Mac ox 10.11+)

    一.全新安装前,先检查是否有安装残留 由于Mac 10.11更改了安全机制,所以cocoapods得安装和卸载命令也有所改变, 1.如果之前装过cocopods,最好先卸载掉,卸载命令: $ sudo ...

  5. IOS把图片缓存到本地的几种方法

    把图片缓存到本地,在很多场景都会用到,如果是只储存文字信息,那建一个plist文件,或者数据库就能很方便的解决问题,但是如果存图片到沙盒就没那么方便了.这里介绍两种保存图片到沙盒的方法. 一.把图片转 ...

  6. VBS基础篇 - 对象(1) - Class对象

    VBS基础篇 - 对象(1) - Class对象   相信对JAVA有一定了解的朋友一定对类这个名词不陌生,但是大家可能没有想过在VBS中使用Class类吧,其实Class类在自动化测试中是相当常用的 ...

  7. opencv 一堆算法，图像处理等

    http://blog.csdn.net/wangzhebupt/article/category/1675453 数据挖掘十大经典实用算法及OpenCV算法 http://www.xuebuyuan ...

  8. shell脚本学习(一)

    1.hbg@HWM:/$ su root密码:root@HWM:/# $表示普通用户, #表示管理员用户root.root是linux系统中权限最高的用户. 2.在bash中,每个变量的值都是字符串. ...

  9. 第4章 流程控制----编写Java程序，应用for循环打印菱形

    package four; public class fouroneone { public static void main(String args[]){ ;i<=;i+=){ ;kong& ...

  10. 判断数字 字母 isDigit(), isalpha()

    判断是否是数字 isdigit isNumber      二者区别http://www.cnblogs.com/xiashengwang/p/3219925.html     需要包含头文件  #i ...