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 相关文章推荐
JS宝典学习笔记(下)
Jan 10 Javascript
jquery 按钮状态效果 正常、移上、按下
Aug 12 Javascript
浅析jQuery(function(){})与(function(){})(jQuery)之间的区别
Jan 09 Javascript
jQuery替换textarea中换行的方法
Jun 10 Javascript
基于dropdown.js实现的两款美观大气的二级导航菜单
Sep 02 Javascript
jQuery stop()用法实例详解
Jul 28 Javascript
onmouseover事件和onmouseout事件全面理解
Aug 15 Javascript
AngularJS constant和value区别详解
Feb 28 Javascript
vue轮播图插件vue-concise-slider的使用
Mar 13 Javascript
详解如何使用webpack打包JS
Jun 21 Javascript
axios取消请求的实践记录分享
Sep 26 Javascript
JavaScript 继承 封装 多态实现及原理详解
Jul 29 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
关于手调机和数调机的选择
2021/03/02 无线电
用PHP 快速生成 Flash 动画的方法
2007/03/06 PHP
mysql_fetch_row,mysql_fetch_array,mysql_fetch_assoc的区别
2009/04/24 PHP
PHP中数组的分组排序实例
2014/06/01 PHP
Yii学习总结之数据访问对象 (DAO)
2015/02/22 PHP
总结PHP如何获取当前主机、域名、网址、路径、端口和参数等
2016/09/09 PHP
php微信支付之公众号支付功能
2018/05/30 PHP
php5.6.x到php7.0.x特性小结
2019/08/17 PHP
Add Formatted Text to a Word Document
2007/06/15 Javascript
js取得url地址参数实例
2013/02/22 Javascript
JS实现判断碰撞的方法
2015/02/11 Javascript
JavaScript字符串删除重复字符的方法
2015/12/25 Javascript
vue.js使用3DES加密的方法示例
2018/05/18 Javascript
小程序实现发表评论功能
2018/07/06 Javascript
vue设置一开始进入的页面教程
2019/10/28 Javascript
JS使用setInterval计时器实现挑战10秒
2020/11/08 Javascript
基于javascript实现放大镜特效
2020/12/03 Javascript
[06:20]2015国际邀请赛第三日top10
2015/08/08 DOTA
[05:03]2018DOTA2亚洲邀请赛主赛事首日回顾
2018/04/04 DOTA
Python的subprocess模块总结
2014/11/07 Python
Python 自动化表单提交实例代码
2017/06/08 Python
Python cookbook(数据结构与算法)从序列中移除重复项且保持元素间顺序不变的方法
2018/03/13 Python
NumPy.npy与pandas DataFrame的实例讲解
2018/07/09 Python
python实现最大优先队列
2019/08/29 Python
numpy np.newaxis 的实用分享
2019/11/30 Python
Django实现前台上传并显示图片功能
2020/05/29 Python
QML用PathView实现轮播图
2020/06/03 Python
Python3创建Django项目的几种方法(3种)
2020/06/03 Python
Python 如何反方向迭代一个序列
2020/07/28 Python
pyqt5 textEdit、lineEdit操作的示例代码
2020/08/12 Python
Keds官方网站:购买帆布运动鞋和经典皮鞋
2016/11/12 全球购物
英国女性化妆品收纳和家具网站:Beautify
2019/12/07 全球购物
高三毕业生自我鉴定
2013/12/20 职场文书
学习标兵获奖感言
2014/02/20 职场文书
就职演讲稿范文
2014/05/19 职场文书
体育个人工作总结
2015/02/09 职场文书