JavaScript DOM-Ready 机制
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 机制的更多相关文章
- 从八道面试题看JavaScript DOM事件机制
As we all know,事件机制其实很简单,无非冒泡和捕获这两点,笔者不再赘述,网上相关文章一大堆,下面让我们直接看面试题 题目一到七,统一设置css .test2 { height: 50px ...
- DOM事件机制进一步理解
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...
- Web UI - Javascript之DOM Ready
最近终于稍微适应了工作环境,终于可以让自己缓口气.于是决定要写点东西,算是督促.记录和提升自己的学习.代码的世界,你不轮它,以后就会被它轮.这个系列尽量保持在一周或两周更一篇,目标是在创造内容的时候更 ...
- Javascript：再论Javascript的单线程机制 之 DOM渲染时机
Javascript:再论Javascript的单线程机制 之 DOM渲染时机 背景 Javascript是单线程事件驱动的,所有能看到的Javascript代码都是在一个线程执行,定时器回调和AJA ...
- 读书笔记：JavaScript DOM 编程艺术（第二版）
读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Nets ...
- javascript的垃圾收集机制
× 目录 [1]原理 [2]标记清除 [3]引用计数[4]性能问题[5]内存管理 前面的话 javascript具有自动垃圾收集机制,执行环境会负责管理代码执行过程中使用的内存.在编写javascri ...
- 解析Javascript事件冒泡机制
本资源引自: 解析Javascript事件冒泡机制 - 我的程序人生 - 博客频道 - CSDN.NET http://blog.csdn.net/luanlouis/article/details/ ...
- JavaScript DOM 编程艺术·setInterval与setTimeout的动画实现解析
先贴上moveElement()函数的大纲,为了方便观看,删了部分代码,完整版粘到文章后面. function moveElement(elementID,final_x,final_y,interv ...
- 简述JavaScript的运行机制
想要理解JavaScript的运行机制,需要分别深刻理解以下几个点: · JavaScript的单线程机制 · 任务队列(同步任务和异步任务) · 事件和回调函数 · 定时器 · Event Loop ...
- javaScript DOM JQuery AJAX
http://www.cnblogs.com/wupeiqi/articles/5369773.html 一 JavaScript JavaScript是一门编程语言,浏览器内置了JavaScript ...
随机推荐
- 转--浅谈ETL
ETL是将业务系统的数据经过抽取.清洗转换之后加载到数据仓库的过程,目的是将企业中的分散.零乱.标准不统一的数据整合到一起,为企业的决策提供分析依据. ETL是BI项目重要的一个环节. 通常情况下,在 ...
- virtualbox共享文件夹无访问权限问题解决方法
virtualbox共享文件夹无访问权限问题解决方法 早就困扰了,这次新装虚拟机又碰到了,记录下来. 这篇文章主要介绍了virtualbox共享文件夹无访问权限问题解决方法,造成这个问题的原因是不跟v ...
- OC - 13.数据解析(JSON与XML)
##数据交互格式 服务器返回给用户的数据,通常是以下两种方式: JSON XML JSON 一种轻量级的数据数据格式,体积比XML小,是服务器返回给移动端通常采用的格式 用使用JSON文件中的数据,需 ...
- iOS10新增Api详解
1.SiriKit SiriKit的功能非常强大,支持音频.视频.消息发送接收.搜索照片.预订行程.管理锻炼等等.在用到此服务时,siri会发送Intent对象,里面包括用户的请求和各种数据,可以对这 ...
- C#程序中获取电脑硬件配置信息的一种方法
本文介绍获取cpu信息和内存信息的方法,根据本文所举例的代码可以举一反三获取更多信息. 获取cpu名称的方法: public string GetCpuInfo() { ManagementObjec ...
- 学习protobuf
一.认识Protobuf ref:http://blog.csdn.net/program_think/article/details/4229773摘要:1. protobuf是一个开源项目.2. ...
- oracle简单两个操作
sqlplus sys/密码 as sysdba ALTER USER 账号 IDENTIFIED BY 新密码; select * from (select rownum 别名 ,表名.* fro ...
- Struts2文件配置 登陆页面
Struts 版本号 struts-2.3.16.3 web.xml 配置 <?xml version=”1.0″ encoding=”UTF-8″?> <web-app versi ...
- Chromium网页Frame Tree创建过程分析
Chromium在加载一个网页之前,需要在Browser进程创建一个Frame Tree.Browser进程为网页创建了Frame Tree之后,再请求Render进程加载其内容.Frame ...
- AS3.0声明静态属性和静态方法
静态属性的变量声明要加static,static var 名称:属性类型=值 静态属性的常量声明要加static或者const,并在声明时就要赋值.static||const var 名称:属性类型= ...