传智博客
快捷导航
蚂蚁部落 网站首页 实例代码 JS实例 查看内容

原生js实现兼容所有浏览器的DOMContentLoaded效果

2017-6-19 14:34| 发布者: antzone| 查看: 211| 评论: 0|来自: 蚂蚁部落

在使用js操作dom元素的时候,一般会将获取dom元素的代码放在window.onload=function(){}事件处理函数里面,因为这个时候dom元素才会加载完毕,否则将无法获取指定的元素,当然我们也可以将js代码放在指定的dom元素后面,不过这里不是我们讨论的重点。但是使用window.onload事件在某些开始后可能会严重的影响客户体验,因为它要等待所有的脚本,css代码、还有图片等内容加载完毕才会触发此事件,尤其是如果图片量很大的情况下,更是会严重客户体验。jQuery可以使用$(document).ready(function(){})来实现我们想要的效果,它的实现源码主要是通过DOMContentLoaded事件实现的,当然还有兼容性问题看需要处理,下面就对此做一下简单介绍。

实现过程介绍:

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

代码如下:

[JavaScript] 纯文本查看 复制代码运行代码
addEventListener(‘DOMContentLoaded',fn,false)

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

可能很多朋友认为使用document.onreadystatechange事件的document.readyState状态是否等于complete来判断dom结构是否加载完毕,但是这个经过测试并不能完成任务,因为如果页面中使用iframe引入子页面,这个时候就子页面需要加载完所有的内容才能够返回complete状态,即便是没有iframe功能类似于window.onload,而不是DOMContentLoaded。解决方案如下:

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

[JavaScript] 纯文本查看 复制代码运行代码
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(){},此函数可以从数组中取出要执行的函数,然后执行,并最后将数组清空。

二.相关阅读:

1.call()函数可以参阅js call()一章节。

2.push()函数可以参阅javascript push()一章节。

3.addEventListener()函数可以参阅addEventListener()一章节。

4.setTimeout()函数可以参阅setTimeout()一章节。


鲜花

握手

雷人

路过

鸡蛋

最新评论

关于我们|手机版|小黑屋| ( 鲁ICP备10022556号-3 )

GMT+8, 2017-12-11 19:05 , Processed in 0.067992 second(s), 22 queries .

Powered by Discuz! X3.2 Licensed

Copyright © 2012-2017 Design: 蚂蚁部落

返回顶部