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


Posted in Javascript onJanuary 12, 2018

使用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事件,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jQuery 版本的文本输入框检查器Input Check
Jul 09 Javascript
怎么清空javascript数组
May 11 Javascript
script不刷新页面的联动前后代码
Sep 18 Javascript
jquery中ready()函数执行的时机和window的load事件比较
Jun 22 Javascript
node.js+express制作网页计算器
Jan 17 Javascript
在JavaScript中call()与apply()区别
Jan 22 Javascript
详解升级react-router 4 踩坑指南
Aug 14 Javascript
vue使用ElementUI时导航栏默认展开功能的实现
Jul 04 Javascript
angularJs利用$scope处理升降序的方法
Oct 08 Javascript
vue spa应用中的路由缓存问题与解决方案
May 31 Javascript
JS原形与原型链深入详解
May 09 Javascript
vue-router之解决addRoutes使用遇到的坑
Jul 19 Javascript
使用JS获取SessionStorage的值
Jan 12 #Javascript
node.js+express+mySQL+ejs+bootstrop实现网站登录注册功能
Jan 12 #Javascript
web前端vue filter 过滤器
Jan 12 #Javascript
你可能不知道的前端算法之文字避让(inMap)
Jan 12 #Javascript
关于HTTP传输中gzip压缩的秘密探索分析
Jan 12 #Javascript
用最少的JS代码写出贪吃蛇游戏
Jan 12 #Javascript
Javascript将图片的绝对路径转换为base64编码的方法
Jan 11 #Javascript
You might like
使用PHP的日期与时间函数技巧
2008/04/24 PHP
php过滤XSS攻击的函数
2013/11/12 PHP
PHP扩展CURL的用法详解
2014/06/20 PHP
php中get_meta_tags()、CURL与user-agent用法分析
2014/12/16 PHP
基于JQuery+PHP编写砸金蛋中奖程序
2015/09/08 PHP
Symfony的安装和配置方法
2016/03/17 PHP
js 解决“options为空或不是对象”
2008/12/22 Javascript
理解JavaScript变量作用域更轻松
2009/10/25 Javascript
《JavaScript高级程序设计》阅读笔记(一) ECMAScript基础
2012/02/27 Javascript
JavaScript定时显示广告代码分享
2015/03/02 Javascript
JavaScript实现获得所有兄弟节点的方法
2015/07/23 Javascript
js判断鼠标位置是否在某个div中的方法
2016/02/26 Javascript
JavaScript数组push方法使用注意事项
2017/10/30 Javascript
vue使用v-if v-show页面闪烁,div闪现的解决方法
2018/10/12 Javascript
详解Nodejs get获取远程服务器接口数据
2019/03/26 NodeJs
vue组件 keep-alive 和 transition 使用详解
2019/10/11 Javascript
原生js实现表格翻页和跳转
2020/09/29 Javascript
python socket多线程通讯实例分析(聊天室)
2016/04/06 Python
详解如何用OpenCV + Python 实现人脸识别
2017/10/20 Python
对Python 内建函数和保留字详解
2018/10/15 Python
python实现将多个文件分配到多个文件夹的方法
2019/01/07 Python
详解用python写网络爬虫-爬取新浪微博评论
2019/05/10 Python
详解python中的模块及包导入
2019/08/30 Python
django中嵌套的try-except实例
2020/05/21 Python
用ldap作为django后端用户登录验证的实现
2020/12/07 Python
世界上最大的二手相机店:KEN
2017/05/17 全球购物
Foot Locker意大利官网:全球领先的运动鞋和服装零售商
2017/05/30 全球购物
口腔医学技术应届生求职信
2013/11/09 职场文书
国际商务专业求职信
2014/07/15 职场文书
日语系毕业求职信
2014/07/27 职场文书
2014年检察院个人工作总结
2014/12/09 职场文书
人事聘任通知
2015/04/21 职场文书
聘任协议书(挂靠)
2015/09/21 职场文书
详解Java实践之适配器模式
2021/06/18 Java/Android
python中对列表的删除和添加方法详解
2022/02/24 Python
python读取并查看npz/npy文件数据以及数据显示方法
2022/04/14 Python