IE9开始和其他现代浏览器可以通过绑定DOMContentLoaded事件；
IE9之前的的浏览器需要绑定onreadystatechange事件并等待readyState为"complete"来判断；
此外IE9之前的浏览器还可以通过不停地执行document.documentElement.doScroll("left")直到不抛出异常来判断。

IE还可以通过<script>脚本设置属性defer="defer"，并判断该脚本的onreadystatechange事件来触发DOM-Ready。

 <!DOCTYPE html>

 <html>

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <style rel="stylesheet" type="text/css">

 </style>

 <script type="text/javascript">

 setTimeout(function(){

     // 事件队列.

     var readyFns;

     // 标记状态.fireReady触发时设置为true.

     var isReady=false;

     // 添加监听事件或马上执行.

     window.ready=function(fn){

         initReady();

         if(isReady){

             fn();

         }

         else{

             readyFns.push(fn);

         }

     };

     // 触发DOM-Ready事件.

     function fireReady(){

         // 只执行一次.

         if(isReady){

             return;

         }

         isReady=true;

         // 遍历执行.

         if(readyFns){

             for(var i=0,fn;fn=readyFns[i++];){

                 fn();

             }

             // 清空事件.

             readyFns.length=0;

         }

     }

     // IE678下判断DOM是否加载完毕.

     function doscrollcheck(){

         try{

             document.documentElement.doScroll("left");

             document.title+="doscroll";

             fireReady();

         }

         catch(e){

             setTimeout(doscrollcheck,1);

         }

     }

     // 初始化监听.

     function initReady(){

         if(readyFns){

             return;

         }

         readyFns=[];

         // 添加事件绑定.

         if(document.addEventListener){

             document.title+="W3C";

             document.addEventListener("DOMContentLoaded",function(){

                 document.removeEventListener("DOMContentLoaded",arguments.callee,false);

                 fireReady();

             },false);

         }

         else if(document.attachEvent){

             document.title+="IE678";

             document.attachEvent("onreadystatechange",function(){

                 if(document.readyState==="complete"){

                     document.detachEvent("onreadystatechange",arguments.callee);

                     fireReady();

                 }

             });

             document.attachEvent("onload",function(){

                 document.title="onload";

                 fireReady()

             });

             // 顶层窗口还可以检测doScrollCheck方法来检测是否可以触发ready事件

             if(document.documentElement.doScroll){

                 // 是否为顶层窗口.

                 if(self===self.top){

                     doscrollcheck();

                 }

             }

         }

     }

     // 如果是动态加载上面的脚本.则应该判断是否完成.

     (function(){

         if(document.readyState==="complete"){

             document.body.innerHTML+="document.readyState loaded";

             fireReady();

         }

     })();

     // 测试.

     ready(function(){

     document.body.innerHTML+="1";

     });

     ready(function(){

         document.body.innerHTML+="2";

     });

     ready(function(){

         document.body.innerHTML+="3";

     });

 },0);// 调整延迟来模拟"动态加载该DOM-Ready的情况"

 setTimeout(function(){

     ready(function(){

         document.body.innerHTML+="4";

     });

 },1000);

 window.onload=function(){

     document.body.innerHTML+="loaded";

 };

 </script>

 </head>

 <body><img src="http://1.su.bdimg.com/skin_zoom/38.jpg" style="width:10px;height:10px;" /></body>

 </html>

参考司徒正美的一篇博客：javascript的domReady

JavaScript DOM-Ready 机制的更多相关文章

  1. 从八道面试题看JavaScript DOM事件机制

    As we all know,事件机制其实很简单,无非冒泡和捕获这两点,笔者不再赘述,网上相关文章一大堆,下面让我们直接看面试题 题目一到七,统一设置css .test2 { height: 50px ...

  2. DOM事件机制进一步理解

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

  3. Web UI - Javascript之DOM Ready

    最近终于稍微适应了工作环境,终于可以让自己缓口气.于是决定要写点东西,算是督促.记录和提升自己的学习.代码的世界,你不轮它,以后就会被它轮.这个系列尽量保持在一周或两周更一篇,目标是在创造内容的时候更 ...

  4. Javascript：再论Javascript的单线程机制 之 DOM渲染时机

    Javascript:再论Javascript的单线程机制 之 DOM渲染时机 背景 Javascript是单线程事件驱动的,所有能看到的Javascript代码都是在一个线程执行,定时器回调和AJA ...

  5. 读书笔记：JavaScript DOM 编程艺术（第二版）

    读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Nets ...

  6. javascript的垃圾收集机制

    × 目录 [1]原理 [2]标记清除 [3]引用计数[4]性能问题[5]内存管理 前面的话 javascript具有自动垃圾收集机制,执行环境会负责管理代码执行过程中使用的内存.在编写javascri ...

  7. 解析Javascript事件冒泡机制

    本资源引自: 解析Javascript事件冒泡机制 - 我的程序人生 - 博客频道 - CSDN.NET http://blog.csdn.net/luanlouis/article/details/ ...

  8. JavaScript DOM 编程艺术·setInterval与setTimeout的动画实现解析

    先贴上moveElement()函数的大纲,为了方便观看,删了部分代码,完整版粘到文章后面. function moveElement(elementID,final_x,final_y,interv ...

  9. 简述JavaScript的运行机制

    想要理解JavaScript的运行机制,需要分别深刻理解以下几个点: · JavaScript的单线程机制 · 任务队列(同步任务和异步任务) · 事件和回调函数 · 定时器 · Event Loop ...

  10. javaScript DOM JQuery AJAX

    http://www.cnblogs.com/wupeiqi/articles/5369773.html 一 JavaScript JavaScript是一门编程语言,浏览器内置了JavaScript ...

随机推荐

  1. C# Ref 与out 的区别

    在C#中,有四种传递参数方式: 1. 传值 (value) : 无额外修饰符 2. 传址(reference) : 需修饰符Ref,传入函数的参数必须先赋值 3. 输出参数(output): 需修饰符 ...

  2. Access的转义字符

    Access中数据库转义字符规则: 插入.更新.=匹配 数据时,文本类型如用''括起来,中间可以有 ",*,%,[,],/,/,?,(,),{,}的任意组合,如要插入一个',需写''并在整个 ...

  3. 【转】发布iOS应用程序到苹果APP STORE完整流程

    原文: http://www.cnblogs.com/JuneWang/p/3850859.html 可以为每个app上传5张截图,虽然至少需要上传一张,可能很少有人会只上传一张图片.另外,你还需要分 ...

  4. C#网页版计算器程序代码

    calculator.aspx.cs代码 using System; using System.Collections.Generic; using System.Linq; using System ...

  5. ios专题 － 斯坦福大学iOS开发公开课总结

    转自:http://blog.devtang.com/blog/2012/02/05/mvc-in-ios-develop/ 前言 iphone开发相关的教程中最有名的,当数斯坦福大学发布的”ipho ...

  6. （三）跟我一起玩Linux网络服务：DHCP服务配置之主服务器配置

    我们今天来做DHCP服务器的配置,我们的前提示要实现用一台虚拟机做DHCP服务器 1.首先,我们要有DHCP软件,我们用到下面两个软件(可以使用其他方法从网上直接安装,具体方法网络搜索) dhcp-3 ...

  7. JavaScript 输入自动完成插件

    作为web开发的一员,应该都不陌生,信息处理时,很多时候需要根据用户的输入实时反馈查询结果供其选择,这给了用户很好的人机交互体验,在各大门户网站上已经被使用的很成熟了,最近项目中用到此功能,网上有很多 ...

  8. 研究在SAE上搭建最新wordpress

    安装SAE上的wordpress,创建应用选择wordpress模板,安装后是3.4版本 新建一个版本2,下载最新wordpress安装包并解压到版本2中 初步猜想修改地方: 数据库配置:wp-con ...

  9. max os 安装python模块PIL

    下载libjpeg和zlib: http://www.ijg.org/files/jpegsrc.v9.tar.gz http://zlib.net/zlib-1.2.8.tar.gz 安装libjp ...

  10. Warning: Invalid argument supplied for foreach()

    经常对提交过来的数据进行双重循环,但是为空时会报错:Warning: Invalid argument supplied for foreach() 如下解决即可:foreach($data[$i]  ...