利用doScroll在IE浏览器里模仿DOMContentLoaded

稍微了解一点框架的事件绑定的都知道 window.onload 事件需要在页面所有内容(包括图片、flash、iframe等)加载完后,才执行,但往往我们更希望在 DOM 一加载完就执行脚本,而各大框架都提供了这样的方法,今天就讨论下其中的原理。 标准浏览器都提供了一个DOMContentLoaded事件来实现,我们只需要注册相应的事件就可以了,而在IE(6~8)浏览器里则需要模仿实现。

IE浏览器里最早的解决方案是绑定document.onreadystatechange事件,判断readyState是否为complete,但是当页面有iframe时就无法及时触发了(等到iframe加载完毕readyState的值才会变为complete) 而之后有了一种利用 doScroll() 方法来模拟 addDOMLoadEvent 事件的方案,且现在主流的 JavaScript 框架(JQuery、YUI,kissy等)基本都采用的这一解决方案。基本思路是不断的判断doScroll,如果没有抛出异常,那么就意味着文档加载完毕了。

 1 /*doScroll判断ie6-8的DOM是否加载完成
 2  *
 3  *@param    null
 4  *@execute  doScroll判断DOM是否加载完成
 5  */
 6 function doScroll(){
 7     try{
 8         document.documentElement.doScroll();
 9     }
10     catch(error){
11         return setTimeout(doScroll,20);
12     };
13 };

 

posted @ 2016-04-26 21:10  风信子578  阅读(405)  评论(0编辑  收藏  举报