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 相关文章推荐
javascript 内存回收机制理解
Jan 17 Javascript
利用js正则表达式验证手机号,email地址,邮政编码
Jan 23 Javascript
JavaScript学习笔记之取数组中最大值和最小值
Mar 23 Javascript
Bootstrap基本插件学习笔记之Tooltip提示工具(18)
Dec 08 Javascript
Js自定义多选框效果的实例代码
Jul 05 Javascript
纯js实现画一棵树的示例
Sep 05 Javascript
JS内部事件机制之单线程原理
Jul 02 Javascript
利用hasOwnProperty给数组去重的面试题分享
Nov 05 Javascript
vue中引入第三方字体文件的方法示例
Dec 17 Javascript
微信小程序上传多图到服务器并获取返回的路径
May 05 Javascript
JS实现点击下拉列表文本框中出现对应的网址,点击跳转按钮实现跳转
Nov 25 Javascript
解决在Vue中使用axios POST请求变成OPTIONS的问题
Aug 14 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&amp;MYSQL服务器配置说明
2006/10/09 PHP
php 前一天或后一天的日期
2008/06/28 PHP
PHP开发负载均衡指南
2010/07/17 PHP
PHP代码网站如何防范SQL注入漏洞攻击建议分享
2012/03/01 PHP
使用PHP实现蜘蛛访问日志统计
2013/07/05 PHP
Laravel推荐使用的十个辅助函数
2019/05/10 PHP
FF(火狐)浏览器无法执行window.close()解决方案
2014/11/13 Javascript
EasyUI中实现form表单提交的示例分享
2015/03/01 Javascript
jquery计算鼠标和指定元素之间距离的方法
2015/06/26 Javascript
angular源码学习第一篇 setupModuleLoader方法
2016/10/20 Javascript
利用Js的console对象,在控制台打印调式信息测试Js的实现
2016/11/26 Javascript
微信开发 JS-SDK 6.0.2 经常遇到问题总结
2016/12/08 Javascript
微信小程序(三):网络请求
2017/01/13 Javascript
vscode配置vue下的es6规范自动格式化详解
2019/03/20 Javascript
[02:51]DOTA2英雄基础教程 风暴之灵
2013/12/23 DOTA
Python实现的递归神经网络简单示例
2017/08/11 Python
python 简单备份文件脚本v1.0的实例
2017/11/06 Python
python+django加载静态网页模板解析
2017/12/12 Python
python和pygame实现简单俄罗斯方块游戏
2021/02/19 Python
python算的上脚本语言吗
2020/06/22 Python
使用anaconda安装pytorch的实现步骤
2020/09/03 Python
2分钟教你实现环形/扇形菜单(基础版)
2020/01/15 HTML / CSS
html5使用canvas绘制太阳系效果
2014/12/15 HTML / CSS
eDreams意大利:南欧领先的在线旅行社
2018/11/23 全球购物
澳大利亚在线家具店:Luxo Living
2019/03/24 全球购物
乌克兰移动电子产品和相关配件的在线商店:iTMag
2020/03/16 全球购物
马来西亚排名第一的宠物用品店:Pets Wonderland
2020/04/16 全球购物
JAVA和C++区别都有哪些
2015/03/30 面试题
中专生毕业自我鉴定
2013/11/01 职场文书
个人银行贷款担保书
2014/04/01 职场文书
某集团股份有限公司委托书样本
2014/09/24 职场文书
民用住房租房协议书
2014/10/29 职场文书
工程项目经理岗位职责
2015/02/02 职场文书
2016入党积极分子党课培训心得体会
2016/01/06 职场文书
pytorch显存一直变大的解决方案
2021/04/08 Python
css常用字体属性与背景属性介绍
2022/02/28 HTML / CSS