JS兼容所有浏览器的DOMContentLoaded事件 _睿知

使用JavaScript操作dom元素的时候，通常会将获取dom元素的代码放在window.onload=function(){}事件处理函数中，但window.onload事件在某些开始后可能会影响客户体验，因为要等待所有的脚本， css代码和图片等内容加载完毕才会触发此事件，尤其是如果图片量很大的情况下，会严重客户体验。所以很多时候，只需要DOM结构加载完毕即可， jQuery的$(document).ready(function(){})实现此功能，下面介绍一下原生JavaScript如何实现此功能。
实现过程介绍:
标准浏览器中，使用DOMContentLoaded事件即可实现我们的要求，注册事件处理函数也极为简单。
代码如下:

文章插图
但IE8和IE8以下浏览器并不支持DOMContentLoaded事件，所以还需要另辟蹊径来解决此问题。
可能很多朋友认为根据document.onreadystatechange事件的document.readyState状态是否等于complete来判断dom结构是否加载完毕，但经过测试并不能完成任务，如果页面使用iframe引入子页面，会有问题。
解决方案如下：
低版本IE浏览器特有的doScroll方法，当dom结构没有加载完成时，调用此方法会报错，于是可以通过定时器函数不断的调用此方法，并结合try catch语句来实现判断功能，代码如下:

文章插图
代码实现了兼容所有浏览器的DOMContentLoaded效果，下面介绍一下它的实现过程。
一.代码注释:
(1).eventQueue = [] ，声明一个空数组，用来要执行的函数队列。
(2).isReady = false ，声明一个变量并赋初值为false ，如果为true则表示dom已经加载完毕。
(3).isBind = false ，声明一个变量并赋初值为false ，如果为true ，则表示时间处理函数绑定完毕。
(4).function domReady(fn){} ，此函数实现了等dom加载完毕再去执行fn函数的功能。
(5).if(isReady){fn.call(window);} ，如果变量值为true ，则直接执行函数。
(6).else{eventQueue.push(fn);} ，将要执行的函数加入数组中。
(7).bindReady() ，此函数可以实现注册事件处理函数。
(8).if(isReady) return ，如果等于true ，直接跳出函数，这个时候fn函数已经被执行。
(9).if(isBind) return ，如果已经注册的话，同样无需进行第二次。
(10).isBind=true ，将变量的值修改为true 。
(11).if(window.addEventListener){document.addEventListener('DOMContentLoaded',execFn,false);} ，如果是标准浏览器则使用addEventListener注册事件处理函数。
(12).else if(window.attachEvent){doScroll();} ，如果IE8及IE8以下浏览器，调用doScroll方法实现此效果。
【JS兼容所有浏览器的DOMContentLoaded事件】(13).function doScroll(){} ，此函数可以使用利用定时器函数不断的调用doScroll()函数，如果报错，则继续调用，否则的话，也就是dom结构加载完毕，于是就执行相关函数。
(14).function execFn(){} ，此函数可以从数组中取出要执行的函数，然后执行，并最后将数组清空。