模拟兼容性的 addDOMLoadEvent 事件-优快云博客

本文深入探讨了如何在IE浏览器中实现类似addDOMLoadEvent的功能，通过利用script的状态或doScroll方法来确保在DOM加载完成后执行特定代码。详细介绍了MatthiasMiller和DiegoPerini提供的解决方案，并附带测试代码验证效果。

原文：http://www.planabc.net/2009/07/30/adddomloadevent/

由于 window.onload 事件需要在页面所有内容（包括图片等）加载完后，才执行，但往往我们更希望在 DOM 一加载完就执行脚本。其实在现在大部分主流浏览器上（Firefox 3+，Opera 9+，Safari 3+，Chrome 2+）都提供了这一事件方法：addDOMLoadEvent。

document.addEventListener("DOMContentLoaded", init,false);

那对于 IE 我们如何模拟 addDOMLoadEvent 事件呢？

Matthias Miller 最早提供了如下的解决方案：

// for Internet Explorer (using conditional comments)
/*@cc_on @*/
/*@if (@_win32)
document.write("<script id=__ie_onload defer src=javascript:void(0)><\/script>");
var script = document.getElementById("__ie_onload");
script.onreadystatechange = function() {
    if (this.readyState == "complete") {
        init(); // call the onload handler
    }
};
/*@end @*/

（利用script的状态来调用函数）

而 Diego Perini 在其后提供了一种利用 doScroll()方法来模拟 addDOMLoadEvent 事件的方案，且现在主流的 JavaScript 框架（JQuery、YUI等）基本都采用的这一解决方案。

原理基本如下：

当 ondocumentready 事件触发，文档（ document ）已经完全解析和建立。如果组件需要操作最初的文档结构，初始化代码需被安置在这之后。ondocumentready 事件告知组件，整个页面已被加载，且在初始文档的 onload 事件触发之前立即触发。

一些方法，例如 doScroll，要求最初的文档被完全加载。如果这些方法是初始化函数的一部分，当ondocumentready 事件触发，他们将被执行。

/*
 *
 * IEContentLoaded.js
 *
 * Author: Diego Perini (diego.perini at gmail.com) NWBOX S.r.l.
 * Summary: DOMContentLoaded emulation for IE browsers
 * Updated: 05/10/2007
 * License: GPL/CC
 * Version: TBD
 *
*/

// @w    window reference
// @fn    function reference
functionIEContentLoaded(w, fn){
var d = w.document,done=false,
// only fire once
    init =function(){
if(!done){
            done=true;
            fn();
        }
    };
// polling for no errors
    (function(){
try{
// throws errors until after ondocumentready
            d.documentElement.doScroll('left');//重点是这个函数。。如果DOM还没好，无法执行doScroll，，知道DOM加载好。。
        }catch(e){
            setTimeout(arguments.callee,50);
return;
        }
// no errors, fire
        init();
    })();
// trying to always fire before onload
    d.onreadystatechange =function(){
if(d.readyState =='complete'){
            d.onreadystatechange =null;
            init();
        }
    };
}

自己写了个上面的测试例子

<img src="http://pic002.cnblogs.com/images/2011/277258/2011042110435071.jpg">
<script language="javascript">
(function () {
try {
// throws errors until after ondocumentready
            window.document.documentElement.doScroll('left');
        　　alert(2);
        } catch (e) {
            setTimeout(arguments.callee, 50);
return;
        }
// no errors, fire
        alert(4);
})();
</script>

图片是一个很大的图片。。但在图片加载完之前，就会调用alert(2);;

扩展阅读：

转载于:https://www.cnblogs.com/sking7/archive/2011/12/09/2281798.html