使用DOMContentLoaded取代部分window.onload
提醒:本页面将不再更新、维护或者支持,文章、评论所叙述内容存在时效性,涉及技术细节或者软件使用方面不保证能够完全有效可操作,请谨慎参考!
使用DOMContentLoaded的好处是不言而喻的,其可以在DOM加载解析完毕后立即执行,而不是像window.onload那样还要继续等待所有外部图片什么的都加载完成才执行,所以在这点上DOMContentLoaded的效率功能要大于window.onload,一般适合于绑定事件到指定元素上时使用。
if(document.addEventListener){
document.addEventListener("DOMContentLoaded",
function() {
alert('DOMContentLoaded is execute')
}, false);
}
大家看到这段代码肯定非常熟悉,是的,想必大家都用过下面这段辅助函数,主要用于给元素绑定事件的,注意是绑定事件,多个绑定事件将依次触发。
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。
真的没有办法了吗?其实办法也不是没有,网上就有人总结出了两种方法:
- 一种是创建空script标签,属性拥有defer,然后待onreadystatechange为complete时激发DOMContentLoaded。
- 一种是通过调用doScroll('left')的原理去判断DOMContentLoaded。
如果大家对代码实现比较感兴趣的话可以参考 《IE里模拟DOMContentLoaded事件》 这篇文章。
说到这里,大家也许在想有没有更好的封装函数供我们使用呢?幸运的是 Jesse Skinner 已经在文章 《addDOMLoadEvent》 给出了其设计的函数脚本 adddomloadevent.js ,大家可以参考下。
[...]这里的addDOMLoadEvent可以参考《使用DOMContentLoaded取代部分window.onload》,关于if lt IE 9条件注释可以参考《CSS设置样式时区分不同版本IE的办法》。这样这段脚本就专门针对IE9及以下浏览器的class为hidefocus设置.hideFocus = true的属性,然后配合CSS的outline:none,基本就完美了。[...]