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查询一些浅薄的结论
一些简单的测试结论 在本机经过一些简单的测试,记录数6W条,得出以下结论,不同的硬件环境和数据记录数,可能会有不一样的结论 1.in, or, exists, like, not in , not e ...
- 创建Java线程池
线程池的作用: 线程池作用就是限制系统中执行线程的数量. 根据系统的环境情况,可以自动或手动设置线程数量,达到运行的最佳效果:少了浪费了系统资源,多了造成系统拥挤效率不高.用线程池控制线程数量,其他线 ...
- xcode7启动页的尺寸设置
iPhone Portrait iOS 8,9-Retina HD 5.5 (1242×2208) @3x iPhone Portrait iOS 8,9-Retina HD 4.7 (750×133 ...
- uniq和sort的用法
uniq和sort都是按行操作的linux命令. sort按文本行排序,如下所示的log文件:直接sort log即可将其排序. 容易忽略的是sort -n命令,在如下例子中将看到 如果直接sort则 ...
- diff函数的实现——LCS的变种问题
昨天去去哪儿笔试,碰到了一个我们一直很熟悉的命令(diff——ubuntu下面),可以比较字符串,即根据最长公共子串问题,如果A中有B中没有的字符输出形式如下(-ch),如果A中没有,B中有可以输出如 ...
- Vim自动补全神器：YouCompleteMe(转)
转自:http://blog.jobbole.com/58978/ 可能会有一段时间写linxu,免不了用vim,留着,找时间实操之 原文出处: marchtea 的博客 第一次听说这个插件还是在偶然 ...
- 使用PHP脚本来写Daemon程序
什么是Daemon进程 这又是一个有趣的概念,daemon在英语中是"精灵"的意思,就像我们经常在迪斯尼动画里见到的那些,有些会飞,有些不会,经常围着动画片的主人公转来转去,啰 ...
- shell 1变量注意点
定义变量时,变量名不加美元符号($),如: variableName="value" 注意,变量名和等号之间不能有空格,这可能和你熟悉的所有编程语言都不一样. 删除变量 使用 un ...
- Hybrid App开发者一定不要错过的框架和工具
最近开始给网站的移动版本做技术选型,发现了很多好玩的东西,写出来给大家分享下. ionicFramework 我是hybrid app的忠实粉丝和大力倡导者,从 新浪移动云开始就不断的寻找能帮助Web ...
- ng-html 报 不安全 警告解决办法
app.filter('to_trusted',['$sce',function($sce){ return function(text){ return $sce.trustAsHtml(text) ...