DOM ready
这个已经有很多人说了,说的也很详细,这里简单说下。利用问题的形式展开~
问:为什么需要dom ready
?
答:我们需要在页面加载后,再进行一些js操作,例如:绑定事件,操作DOM。
问:为什么不用window.onload
事件?
答:window.onload
要等页面内的所有资源都加载完才触发,像图片、音频等,等待的时间会比较长。
问:那直接用DOMContentLoaded
就好,还墨迹这么多?
答:DOMContentLoaded
本来是FireFox
的私有事件,FF3版本才完整支持,webkit
系列的在525版本后才增加这个事件的支持,IE系列的在IE9才开始支持。
可以看看它的兼容性,如下:
问:IE在不支持DOMContentLoaded
事件的情况下,如何判断DOM ready
?
-
方法一:往页面内添加
script
标签,添加defer
属性,通过监听这个脚本的readyState
,当脚本加载完成时就判断DOM ready
了。但这个方法的缺点是:当页面里有
iframe
的时候,会等iframe
里所有的资源加载完才触发,和onload
差不多。 方法二:通过轮询来调用
document.documentElement.doScroll
方法,调用成功表示DOM ready
了。
所以,IE下用方法二来判断DOM ready
。
问:document.documentElement.doScroll
是个什么鬼?
答:IE下一些事件只有在DOM准备好后才能触发,document.documentElement.doScroll
就是这样一个事件。通过判断调用是否成功,进而判断DOM是否加载完。
这个hack最早是外国的大牛发现的,详情可以看这里。
问:IE的判断完了,那webkit
系列的在525版本之前的怎么判断?
答:通过轮询判断document.readyState
,当readyState
为loaded/complete
的时候,判断DOM加载完毕。
问:你说的我都懂,有没有什么现成的库?
答:基本上比较流行的库都有实现的,像jQuery/Zepto/Prototype/Moontools/YUI
等,只是每个库实现的方式都不同。
github
上也有个比较出名的库domready,现在它的主分支是针对有DOMContentLoaded
事件的浏览器,兼容性如下:
- IE9+
- Firefox 4+
- Safari 3+
- Chrome *
- Opera *
不过它的0.3.0分支是兼容多种浏览器的,兼容性如下:
- IE6+
- Firefox 2+
- Safari 3+
- Chrome *
- Opera *
最后
如果是用在移动端的话,可以放心的通过DOMContentLoaded
事件来判断。PC的话,国内现在的环境,还是乖乖用兼容版本吧。
参考: