使用DOMContentLoaded取代部分window.onload

使用DOMContentLoaded的好处是不言而喻的，其可以在DOM加载解析完毕后立即执行，而不是像window.onload那样还要继续等待所有外部图片什么的都加载完成才执行，所以在这点上DOMContentLoaded的效率功能要大于window.onload，一般适合于绑定事件到指定元素上时使用。

1
2
3
4
5
6

if(document.addEventListener){
  document.addEventListener("DOMContentLoaded",
    function() {
        alert('DOMContentLoaded is execute')
    }, false);
}

大家看到这段代码肯定非常熟悉，是的，想必大家都用过下面这段辅助函数，主要用于给元素绑定事件的，注意是绑定事件，多个绑定事件将依次触发。

1
2
3
4
5
6
7
8
9
10
11
12
13
14

function addListener(element, e, fn) {
    if (element.addEventListener) {
        element.addEventListener(e, fn, false);
    } else {
        element.attachEvent("on" + e, fn);
    }
}
 
// 比如绑定window.onload事件
addListener(window, "load", 
    function() {
        alert('window.onload is execute');
    }
);

说到这里大家就有疑问了，IE系列的浏览器不支持.addEventListener方法，这也就是在addListener函数里面要做个判断的原因，如果不支持就使用.attachEvent方法，那回到一开始的DOMContentLoaded的代码，那么这段代码很明显就不能支持IE系列浏览器了，我们能不能使用addListener函数呢？很遗憾，问题不在于这儿，而是IE系列浏览器不能很好的支持DOMContentLoaded，所以即使使用了addListener这样的辅助函数依然无济于事。

注意 : 微软最新发布的Internet Explorer 9（IE9）已经能够支持.addEventListener和DOMContentLoaded。

真的没有办法了吗？其实办法也不是没有，网上就有人总结出了两种方法：

1. 一种是创建空script标签，属性拥有defer，然后待onreadystatechange为complete时激发DOMContentLoaded。
2. 一种是通过调用doScroll(‘left’)的原理去判断DOMContentLoaded。

如果大家对代码实现比较感兴趣的话可以参考《IE里模拟DOMContentLoaded事件》这篇文章。

说到这里，大家也许在想有没有更好的封装函数供我们使用呢？幸运的是Jesse Skinner已经在文章《addDOMLoadEvent》给出了其设计的函数脚本adddomloadevent.js，大家可以参考下。