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 ...
随机推荐
- Sql解锁 数据库死锁检测
USE [DataBaseName]GO/****** Object: StoredProcedure [dbo].[sp_check_deadlock] Script Date: 07/04 ...
- 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 ...
- wamp不能使用phpmyadmin，提示“You don't have permission to access /phpmyadmin/ on this server.” 转载
换了win8之后wamp明显不怎么好用了,显示80端口被system占用,后是masql出现了403错误,多番百度谷歌找到了解决方案,这里与大家分享 当你安装完成wamp后,打开localhost或i ...
- redis数据类型(字符串)
字符串 这是最简单Redis类型.如果你只用这种类型,Redis就像一个可以持久化的memcached服务器 127.0.0.1:6379> set mykey somevalue OK 127 ...
- 机器学习系列(17)_Yelper推荐系统
1. 我们为什么需要推荐系统?“推荐”可是个当红话题.Netflix愿意用百万美金召求最佳的电影推荐算法,Facebook也为了登陆时的推荐服务开发了上百个项目,遑论现在市场上各式各样的应用都需要个 ...
- Start an installation from GRUB
Start an installation from GRUB Description This tip will show you how to start an installation for ...
- JVM原理
Java语言写的源程序通过Java编译器,编译成与平台无关的‘字节码程序’(.class文件,也就是0,1二进制程序),然后在OS之上的Java解释器中解释执行,而JVM是java的核心和基础,在ja ...
- Python 3中套接字编程中遇到TypeError: 'str' does not support the buffer interface的解决办法
转自:http://blog.csdn.net/chuanchuan608/article/details/17915959 目前正在学习python,使用的工具为python3.2.3.发现3x版本 ...
- 2016030201 - github上创建项目
具体步骤如下: 前提是你已经由github账户,登陆你的账户后 步骤1:点击右下角+new repository 2.添加代码库描述内容,比如reposltory name 例如我创建的内容 3.点击 ...
- Core MVC
Core MVC 配置全局路由前缀 前言 大家好,今天给大家介绍一个 ASP.NET Core MVC 的一个新特性,给全局路由添加统一前缀.严格说其实不算是新特性,不过是Core MVC特有的. 应 ...