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

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

您可能感兴趣的文章:

  • JS、CSS以及img对DOMContentLoaded事件的影响
  • Javascript封装DOMContentLoaded事件实例
  • 浅谈js中startsWith 函数不能在任何浏览器兼容的问题
  • Base64(二进制)图片编码解析及在各种浏览器的兼容性处理
  • JavaScript自定义浏览器滚动条兼容IE、 火狐和chrome
  • 微信浏览器弹出框滑动时页面跟着滑动的实现代码（兼容Android和IOS端）
  • JS IOS/iPhone的Safari浏览器不兼容Javascript中的Date()问题如何解决
  • 浅谈解决360兼容模式浏览器的方法
赞 (0)

相关推荐

  • 浅谈js中startsWith 函数不能在任何浏览器兼容的问题

    在做js测试的时候用到了startsWith函数,但是他并不是每个浏览器都有的,所以我们一般要重写一下这个函数,具体的用法可以稍微总结一下 在有些浏览器中他是undefined 所以我们可以这样的处理一下. if (typeof String.prototype.startsWith != 'function') { String.prototype.startsWith = function (prefix){ return this.slice(0, prefix.length) === p

  • JS、CSS以及img对DOMContentLoaded事件的影响

    JS、CSS以及img对DOMContentLoaded事件的影响

    前端的纯技术就是对规范的认知 什么是DOMContentLoaded事件? 首先想到的是查看W3C的HTML5规范,DOMContentLoaded事件在什么时候触发: Once the user agent stops parsing the document, the user agent must run the following steps: 1. Set the current document readiness to "interactive" and the inse

  • 浅谈解决360兼容模式浏览器的方法

    一.renderer <meta name="renderer" content="webkit|ie-comp|ie-stand"> 为双核浏览器准备的:指定双核浏览器默认以何种方式渲染页面. <meta name="renderer" content="webkit">//默认webkit内核 <meta name="renderer" content="ie-c

  • Base64(二进制)图片编码解析及在各种浏览器的兼容性处理

    Base64(二进制)图片编码解析及在各种浏览器的兼容性处理

    IE浏览器目前最高的版本是v11,而微软放弃了IE,转向新的浏览器开发,并取名为Edge.base64图片在IE9及以后的图片均能显示没有问题,而Firefox, Chrome, Safari等非IE浏览器都能正常显示,所以显得IE浏览器比较low.那么兼容性究竟应该怎么来处理呢? 分三种情况. (1)IE9+.Firefox.Chrome.Safari等浏览器 base64图片在HTML里的标准写法是: <img src="data:image/jpeg;base64,/9j/4AAQS

  • Javascript封装DOMContentLoaded事件实例

    最近在写一个Javascript的框架,刚把DOMContentLoaded事件封装好,略带小兴奋,把开发过程中遇到的原理和兼容性问题做篇笔记,省的忘记到处找. 我们在写js代码的时候,一般都会添加window.onload事件,主要是为了在DOM加载完后可以使用getElementById,getElementsByTagName等方法选取DOM元素进行操作,但是window.load会等到加载完DOM.脚本.CSS,最后加载完图片甚至是iframe中的所有资源才会触发,很多时候网页的图片较多

  • JS IOS/iPhone的Safari浏览器不兼容Javascript中的Date()问题如何解决

    var date = new Date('2016-11-11 11:11:11'); document.write(date); 最近在写一个时间判断脚本,需要将固定好的字符串时间转换为时间戳进行比较,在做的时候个人习惯使用chrome作为调试工具,代码基本完成之后,一切正常: 使用其他浏览器访问,好嘛,IE跟safari都不兼容,返回错误"Invalid Date". 想着估计是字符串格式的问题,改成'2016/11/11 11:11:11'再测试,结果正常,以为这样应该没问题了,

  • 微信浏览器弹出框滑动时页面跟着滑动的实现代码（兼容Android和IOS端）

    在做微信开发的时候遇到这个问题:微信浏览器弹出框滑动时页面跟着滑动. 我觉得这个问题用的是下面这几行代码: var $body = $('body'), dialogIsInView = !1,//当前是不是对话框 lastContentContainerScrollTop = -1,//用于弹出框禁止内容滚动 $contentContainer = $('#content-container');//内容容器 //阻止Window滚动 function stopWindowScroll() {

  • JavaScript自定义浏览器滚动条兼容IE、 火狐和chrome

    JavaScript自定义浏览器滚动条兼容IE、 火狐和chrome

    今天为大家分享一下我自己制作的浏览器滚动条,我们知道用css来自定义滚动条也是挺好的方式,css虽然能够改变chrome浏览器的滚动条样式可以自定义,css也能够改变IE浏览器滚动条的颜色.但是css只能是改变IE浏览器的颜色,而且CSS不能做到改变火狐浏览器的样式和颜色.所以只能是通过JavaScript来实现了.也有插件可以做到.我分享一下我自己使用原生JavaScript实现的思路.先上个图看下效果: JavaScript实现的思路就是模拟浏览器自身滚动条.我制作的思路是先将整个文档放在一

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

    使用JavaScript操作dom元素的时候,通常会将获取dom元素的代码放在window.onload=function(){}事件处理函数中,但window.onload事件在某些开始后可能会影响客户体验,因为要等待所有的脚本,css代码和图片等内容加载完毕才会触发此事件,尤其是如果图片量很大的情况下,会严重客户体验.所以很多时候,只需要DOM结构加载完毕即可,jQuery的$(document).ready(function(){})实现此功能,下面介绍一下原生JavaScript如何实现

  • js 兼容多浏览器的回车和鼠标焦点事件代码(IE6/7/8,firefox,chrome)

    文本框: 复制代码 代码如下: <input type="text" onkeydown="keydownsearch(event)" /> js代码: 复制代码 代码如下: function keydownsearch(evt) { evt = (evt) ? evt : ((window.event) ? window.event : "") keyCode = evt.keyCode ? evt.keyCode : (evt.w

  • 原生JS绑定滑轮滚动事件兼容常见浏览器

    滑轮滚动页面的事件在网页特效中进场遇到,但是在不同浏览器下的实现方式又不同.下面我实现的方法,兼容常见浏览器. function getData(event){ var e = event || window.event; //获取滚动距离(FF每次滚动 data为3或者-3,其他为120或者-120) var data = e.detail || e.wheelDelta; alert(data); } //IE之外的绑定事件方法 if(document.addEventListener &&a

  • js事件驱动机制 浏览器兼容处理方法

    js事件驱动机制 浏览器兼容处理方法

    3.1. 事件是如何产生的 * 第一种情况,用户对网页做了某些操作,比如,点击了一个按钮,产生点击事件. 第二种情况,用户没有对网页做操作,也可能产生事件,比如浏览器已经将整个页面加载完毕,会产生加载完成事件.当事件产生以后,浏览器会查找产生事件的节点有没有绑订相应的事件处理代码.如果有,则调用该代码来处理.如果没有,会继续向上查找父节点,有没有对应的事件处理代码(事件冒泡). 3.2. 绑订事件处理代码 ** 1) 绑订事件处理代码到html标记乊上 比如: <a id="a1"

  • javascript 按键事件(兼容各浏览器)

    第一部分:浏览器的按键事件 用js实现键盘记录,要关注浏览器的三种按键事件类型,即keydown,keypress和keyup,它们分别对应onkeydown.onkeypress和onkeyup这三个事件句柄.一个典型的按键会产生所有这三种事件,依次是keydown,keypress,然后是按键释放时候的keyup. 在这3种事件类型中,keydown和keyup比较底层,而keypress比较高级.这里所谓的高级是指,当用户按下shift + 1时,keypress是对这个按键事件进行解析后

  • js兼容pc端浏览器并有多种弹出小提示的手机端浮层控件实例

    本文实例讲述了js兼容pc端浏览器并有多种弹出小提示的手机端浮层控件.分享给大家供大家参考.具体如下: 完整实例代码点击此处本站下载. 用法 <input type="button" id="btn_dialog" value="打开浮层"/> <div id="dialog-content" style="display:none;">这是内容</div> <sc

  • JS获得鼠标位置（兼容多浏览器ie,firefox）脚本之家修正版

    JS获得鼠标位置(兼容多浏览器ie,firefox)我们修正版 function mouseMove(ev) { ev= ev || window.event; var mousePos = mouseCoords(ev); //alert(ev.pageX); document.getElementById("xxx").value = mousePos.x; document.getElementById("yyy").value = mousePos.y; }

  • JS实现兼容各种浏览器的高级拖动方法完整实例【测试可用】

    本文实例讲述了JS实现兼容各种浏览器的高级拖动方法.分享给大家供大家参考,具体如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html;

  • JS实现兼容各种浏览器的获取选择文本的方法【测试可用】

    JS实现兼容各种浏览器的获取选择文本的方法【测试可用】

    本文实例讲述了JS实现兼容各种浏览器的获取选择文本的方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" con

随机推荐