插播广告: 百度商务搜索部, 招聘前端测试工程师! 待遇优厚! 要求JS, Linux基础. 有意向的同学请直接联系我!
DOM Ready 概述
熟悉jQuery的人, 都知道DomReady事件. window.onload事件是在页面所有的资源都加载完毕后触发的. 如果页面上有大图片等资源响应缓慢, 会导致window.onload事件迟迟无法触发.所以出现了DOM Ready事件. 此事件在DOM文档结构准备完毕后触发, 即在资源加载前触发. 另外我们需要在DOM准备完毕后, 再修改DOM结构, 比如添加DOM元素等. 否则有可能出现“Internet Explorer无法打开站点”的问题. 要模拟此错误, 可以在页面上添加下面的代码, 并用IE6打开:
有关DOM Ready事件的实现,包括jQuery中的DomReady实现, 在国内和国外网站上已经早有人分享了经验, 并提出了许多方法.
为了避免人云亦云, 抱着怀疑的态度, 我去研究了这些DOM Ready方法. 只会使用Google搜索或者jQuery等类库, 不会帮助前端开发人员进步.所以弄懂其中的原理才是关键.
对于FF, Chrome, Safari, IE9等浏览器:
DOMContentLoaded 事件在许多Webkit浏览器以及IE9上都可以使用, 此事件会在DOM文档准备好以后触发, 包含在HTML5标准中. 对于支持此事件的浏览器, 直接使用DOMContentLoaded事件是最简单最好的选择.
对于IE6,7,8:
不幸的是, IE6,7,8都不支持DOMContentLoaded事件.所以目前所有的hack方法都是为了让IE6,7,8支持DOM Ready事件.
鉴于下面的统计结果(2011年5月统计的数据), 我们必须支持IE6,7,8, 一个都不能少!
中国某音乐站:
CNZZ:
另外鉴于"360浏览器"的占有率, 还要支持"360+IE6"这种无敌组合.
DOM Ready 实现方法
首先总结一下目前IE下的DOM Ready方法:
(1)setTimeout : 在setTimeout中触发的函数, 一定会在DOM准备完毕后触发.
示例代码:
1: //setTimeout Dom Ready
2: var setTimeoutReady = function(){
3: document.getElementById("divMsg").innerHTML += "
setTimeout , readyState:" + document.readyState;
4: };
5: var setTimeoutBindReady = function(){
6: /in/.test(document.readyState)?setTimeout(arguments.callee, 1):setTimeoutReady();
7: };
8: setTimeoutBindReady();
(2)readyState: 判断readyState的状态是否为Complete, interactive等触发
示例代码:
1: //onreadystatechange event
2: document.onreadystatechange = function(e){
3: document.getElementById("divMsg").innerHTML += "
onreadystatechange, readyState:" + document.readyState;
4:
5: };
(3)外部script: 通过设置了script块的defer属性实现.
参见: http://dean.edwards.name/weblog/2005/09/busted/
示例代码:
1:
(4)内部script: 外部script的改进版本. 外部script需要页面引用额外的js文件. 内部script方法可以避免此问题.
参见: http://dean.edwards.name/weblog/2006/06/again/
示例代码:
1: //script defer Dom Ready
2: document.write("