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 ...
随机推荐
- linux下安装多个mysql实例（摘自国外：How to create multiple mysql instance in CentOS 6.4 and Red Hat 6.4)
How to create multiple mysql instance in CentOS 6.4 and Red Hat 6.4 from:http://sharadchhetri.com/20 ...
- 【elasticsearch】（2）centos7 超简单安装elasticsearch 的监控、测试的集群工具elasticsearch head
elasticsearch-head是elasticsearch(下面称ES)比较普遍使用的可监控.测试等功能的集群管理工具,是由H5编写的单独的网页程序.使用方法网上很多,这里教大家一个超简单安装h ...
- 关于安卓启动eclipse错误：找不到元素‘d:devices'的声明
可以把C:\Documents and Settings\Administrator\.android\devices.xml这个文件删除, 再把sdk里面tools\lib下的这个文件拷贝到你删除的 ...
- 百度地图Api 根据两个坐标点计算距离
百度地图Android Sdk的Api里面,没有现成的直接获取两个坐标点之间距离的方法,但是,在jsapi里面,有直接计算距离的方法. class Point: pass def max(a,b): ...
- Action配置
Action是一个逻辑控制器,并不直接对浏览器生成响应,而是返回指定逻辑视图(一个字符串). 不推荐在Action的name属性值中使用点(.)和中划线(-),有可能会引发一些未知异常. 1使用A ...
- go和swift
你生命中的有些东西终究会失去,比如我住了6年的陈寨,这个聚集了郑州十几万IT民工的地方,说拆就拆了.再比如我玩了3年的坦克英雄,这个带给我太多快乐的游戏,说停就停了. 编程对我而言是种爱好,我上学6年 ...
- Faces.JavaServer Pages（JSP）
zhengly.cn atitit.Servlet2.5 Servlet 3.0 新特性 jsp2.0 jsp2.1 jsp2.2新特性 1.1. Servlet和JSP规范版本对应关系:1 1.2. ...
- python【第十二篇】Mysql基础
内容: 1.数据库介绍及MySQL简介 2.MySQL基本操作 1 数据库介绍 1.1什么是数据库? 数据库(Database)是按照数据结构来组织.存储和管理数据的仓库,每个数据库都有一个或多个不同 ...
- ASP.NET MVC轻教程 Step By Step 6——改进表单
上一节我们使用原始的HTML表单来完成留言功能,但是ASP.NET MVC提供了丰富的HTML辅助方法来帮助我们构建更简洁优雅的表单. Step 1. 修改Form标签 首先,我们可以使用Html.B ...
- Android Studio与Genymontion的安装
需要安装的软件: VirtualBox 5.1.4 Genymotion 2.7.2 Android Studio 2.1.2 安装步骤: 使用安装版安装Android Studio 1. 执 ...