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 validator 插件增加日期比较方法
Feb 21 Javascript
菜鸟javascript基础资料整理2
Dec 06 Javascript
用JQUERY增删元素的代码
Feb 14 Javascript
jquery如何改变html标签的样式(两种实现方法)
Jan 16 Javascript
jquery实现的Banner广告收缩效果代码
Sep 02 Javascript
JQuery实现的按钮倒计时效果
Dec 23 Javascript
jQuery基于cookie实现的购物车实例分析
Dec 24 Javascript
JavaScript实现水平进度条拖拽效果
Jan 18 Javascript
jQuery实现上下滚动公告栏详细代码
Nov 21 jQuery
详解微信小程序工程化探索之webpack实战
Apr 20 Javascript
从表单校验看JavaScript策略模式的使用详解
Oct 17 Javascript
原生JS实现飞机大战小游戏
Jun 09 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
有道搜索和IP138的IP的API接口(PHP应用)
2012/11/29 PHP
Zend Framework数据库操作方法实例总结
2016/12/11 PHP
Nginx下ThinkPHP5的配置方法详解
2017/08/01 PHP
laravel 模型查询按照whereIn排序的示例
2019/10/16 PHP
一些有用的JavaScript和jQuery的片段分享
2011/08/23 Javascript
jquery实现图片渐变切换兼容ie6/Chrome/Firefox
2013/08/02 Javascript
JS中处理时间之setUTCMinutes()方法的使用
2015/06/12 Javascript
jQuery插件datepicker 日期连续选择
2015/06/12 Javascript
JS基于Ajax实现的网页Loading效果代码
2015/10/27 Javascript
ReactJs快速入门教程(精华版)
2016/11/28 Javascript
Jquery给当前页或者跳转后页面的导航栏添加选中后样式的实例
2016/12/08 Javascript
jQuery常见的选择器及用法介绍
2016/12/20 Javascript
JS 调用微信扫一扫功能
2016/12/22 Javascript
阿里大于短信验证码node koa2的实现代码(最新)
2017/09/07 Javascript
如何编写一个完整的Angular4 FormText 组件
2017/11/18 Javascript
浅谈VUE-CLI脚手架热更新太慢的原因和解决方法
2018/09/28 Javascript
详解Vue中CSS样式穿透问题
2019/09/12 Javascript
优雅的使用javascript递归画一棵结构树示例代码
2019/09/22 Javascript
Layui带搜索的下拉框的使用以及动态数据绑定方法
2019/09/28 Javascript
小程序实现录音功能
2020/09/22 Javascript
js实现删除json中指定的元素
2020/09/22 Javascript
Python的Flask框架中web表单的教程
2015/04/20 Python
Centos Python2 升级到Python3的简单实现
2016/06/21 Python
利用Python实现Shp格式向GeoJSON的转换方法
2019/07/09 Python
python如何统计代码运行的时长
2019/07/24 Python
python3 selenium自动化 frame表单嵌套的切换方法
2019/08/23 Python
python编写计算器功能
2019/10/25 Python
window环境pip切换国内源(pip安装异常缓慢的问题)
2019/12/31 Python
python zip()函数的使用示例
2020/09/23 Python
用css3实现当鼠标移进去时当前亮其他变灰效果
2014/04/08 HTML / CSS
纽约服装和生活方式品牌:Saturdays NYC
2017/08/13 全球购物
网上卖盒饭创业计划书范文
2014/02/07 职场文书
食品工程专业求职信
2014/06/15 职场文书
三傻大闹宝莱坞观后感
2015/06/03 职场文书
Linux安装Nginx步骤详解
2021/03/31 Servers
SpringBoot 集成Redis 过程
2021/06/02 Redis