since.2006  

随着ajax的流行，页面中的JS代码越来越多。一般我们用JS处理页面时，都是使用window.onload等到页面加载完毕后再来处理，否则有时会出现文档未加载完毕而报的错误了。

但window.onload有一个不好的地方，它会等到整个页面（包括图片，flash等）全部加载完毕后，才会执行。一个页面中如果有很多图片，中间会有较长的延迟才会去执行我们的代码。

具体效果：http://www.ajaxeye.com/labs/domready.htm（注意页面中的两个小方块颜色，一开始默认都是红色，注意颜色的改变）

上面页面中，会在DOM树加载完毕后和window.onload时分别改变两个小方块的颜色为绿色。

解决方法可以参见英文原文：
http://dean.edwards.name/weblog/2005/09/busted/
http://dean.edwards.name/weblog/2006/06/again/

解决方法就是想办法监听DOM树加载完毕的事件，等DOM树载完毕后执行我们的代码

• Firefox、Opera9下，可以监听DOMContentLoaded事件来处理
• IE下，可以给script标签加defer来处理

偶这个是从mootools，prototype中抠出来的IE，Firefox下测试通过

Event.addDOMReadyEvent = function($callback) {    
    var timer, fired = false;    
        
    function fireDOMReadyEvent() {    
        if (fired) {    
            return;    
        }    
        if (timer) {    
            window.clearInterval(timer);    
        }    
        fired = true;    
        $callback();    
    }    
        
    // firefox, opera, safari ...     
    if (document.addEventListener) {    
        if (window.webkit) {    
            timer = window.setInterval(function() {    
                if (/loaded|complete/.test(document.readyState)) {    
                    fireDOMReadyEvent();    
                }    
            }, 10);    
                
            Event.addEvent(window, 'load', fireDOMReadyEvent);    
        } else {    
            // firefox, opera9 使用 DOMContentLoaded    
            document.addEventListener("DOMContentLoaded", fireDOMReadyEvent, false);    
        }    
    } else {    
        // Internet Explorer中使用 defer 属性    
        var src = (window.location.protocol == 'https') ? '://0' : 'javascript:void(0)';    
        document.write('<SCRIPT id=__tbOnDOMReady src="' + src + '" defer><\/script>');    
        $('__tbOnDOMReady').onreadystatechange = function() {    
            if (this.readyState == 'complete') {    
                this.onreadystatechange = null;    
                fireDOMReadyEvent();    
            }    
        };    
    }    
}