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

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

实现过程介绍:

标准浏览器中，使用domcontentloaded事件即可实现我们的要求，注册事件处理函数也极为简单。

代码如下:

addeventlistener(‘domcontentloaded',fn,false)

但ie8和ie8以下浏览器并不支持domcontentloaded事件，所以还需要另辟蹊径来解决此问题。

可能很多朋友认为根据document.onreadystatechange事件的document.readystate状态是否等于complete来判断dom结构是否加载完毕，但经过测试并不能完成任务，如果页面使用iframe引入子页面，会有问题。

解决方案如下：

低版本ie浏览器特有的doscroll方法，当dom结构没有加载完成时，调用此方法会报错，于是可以通过定时器函数不断的调用此方法，并结合try catch语句来实现判断功能，代码如下:

eventqueue = [];
isready = false;
isbind = false;
function domready(fn){
 if(isready){
  fn.call(window);
 }
 else{
  eventqueue.push(fn);
 };
 bindready();
};
function bindready(){
 if(isready) return;
  if(isbind) return;
  isbind=true;
  if(window.addeventlistener){
   document.addeventlistener('domcontentloaded',execfn,false);
  }
  else if(window.attachevent){
   doscroll();
  };
};
function doscroll(){
 try{
  document.documentelement.doscroll('left');
 }
 catch(error){
  return settimeout(doscroll,20);
 };
 execfn();
};
function execfn(){
 if(!isready){
  isready=true;
  for(var index=0;i<eventqueue.length;index++){
   eventqueue[index].call(window);
  };
  eventqueue = [];
 };
};
domready(function(){
 //code
});
domready(function(){
 //code
});

代码实现了兼容所有浏览器的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方法实现此效果。

（13）.function doscroll(){}，此函数可以使用利用定时器函数不断的调用doscroll()函数，如果报错，则继续调用，否则的话，也就是dom结构加载完毕，于是就执行相关函数。

（14）.function execfn(){}，此函数可以从数组中取出要执行的函数，然后执行，并最后将数组清空。

总结

以上所述是小编给大家介绍的js兼容所有浏览器的domcontentloaded事件，希望对大家有所帮助