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兼容模式浏览器的方法
时间: 2018-01-11

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

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'再测试,结果正常,以为这样应该没问题了,

Javascript封装DOMContentLoaded事件实例

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

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

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

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

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

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

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

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

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

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

使用base64对图片的二进制进行编码并用ajax进行显示

使用base64对图片的二进制进行编码并用ajax进行显示 有时候我们需要动态的将图片的二进制在页面上进行显示,如我们需要弄一个验证码的功能,那么如果我们的验证码的图片在后台得到的是该图片的二进制,那么当我们需要在页面上点击一个按钮利用ajax进行切换的时候,如果在后台直接返回的是该图片的二进制,那么该图片是无法进行显示的. 直接返回字节流给img标签的src是可以的,如<img src="servlet/CheckCode">,但在之后进行切换的时候使用ajax请求,如果

php基于base64解码图片与加密图片还原实例

本文实例讲述了php基于base64解码图片与加密图片还原的实现方法.分享给大家供大家参考.具体实现方法如下: 本例中$data是一段经过base64编码的图片.具体代码如下: 复制代码 代码如下: <?php //文件名:base64.php $data="/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ

php实现将base64格式图片保存在指定目录的方法

本文实例讲述了php实现将base64格式图片保存在指定目录的方法.分享给大家供大家参考,具体如下: <?php header('Content-type:text/html;charset=utf-8'); $base64_image_content = $_POST['imgBase64']; //匹配出图片的格式 if (preg_match('/^(data:\s*image\/(\w+);base64,)/', $base64_image_content, $result)){ $ty

项目实践一图片上传之form表单还是base64前端图片压缩(前端图片压缩)

第一个项目终于上线了,是一个叫亲青筹的公益众筹平台,微信端,电脑端还有后台界面大部分都是我完成的,几个月过来,感觉收获了很多,觉得要总结一下. 首先想到的是图片上传的问题.在通常表单数据都是ajax上传的情况下,为了上传图片而去使用form表单感觉很蠢.然后那时候也没有想到用jquery form插件. 后台的同事给的方案是用iframe里写一个form表单,然后上传图片之后自动提交表单,他将图片在服务器上的地址以跳转页url的一部分,我再来截取的方式. 方案一:iframe+form表单 <f

Android个人中心的头像上传,图片编码及截取实例

首先需要有网络权限,然后我们这里匹配的网络请求是之前封装好的Okhttp. 非常的简单方便,直接复制进去,依赖一下包,然后调用方法即可. 这里是把图片转换成Base64.decode(imageString, Base64.DEFAULT); 转成Base64编码上传.具体内容也不少,需要完全整明白,还是要花点时间慢慢看的. 先看看简单的效果图: 那么万事具备,只欠东风了.直接上代码: public class MainActivity extends AppCompatActivity imp

javascript中的Base64、UTF8编码与解码详解

Base64编码说明 Base64编码要求把3个8位字节(3*8=24)转化为4个6位的字节(4*6=24),之后在6位的前面补两个0,形成8位一个字节的形式. 如果剩下的字符不足3个字节,则用0填充,输出字符使用'=',因此编码后输出的文本末尾可能会出现1或2个'='. base64编码库:(已验证可用) 复制代码 代码如下: var base64 = (function(){     var keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmn

asp.net(c#)实现从sqlserver存取二进制图片的代码

下面说说主要实现思路: 1.存取图片 (1).将图片文件转换为二进制并直接存进sql server 复制代码 代码如下: //UploadHelper.cs /// <summary> /// 将图片转化为长二进制 /// </summary> /// <param name="photopath"></param> /// <returns></returns> public static Byte[] SetI

asp.net 字符串、二进制、编码数组转换函数

1.字符串转二进制数组 string content="这是做个测试!"; System.Text.UnicodeEncoding converter = new System.Text.UnicodeEncoding(); byte[] byteArr = converter.GetBytes(content); 2.二进制数组转为字符串 复制代码 代码如下: System.Text.UnicodeEncoding converter = new System.Text.Unicod

H5移动开发Ajax上传多张Base64格式图片到服务器

废话不多说,直接看代码吧 1.上传组件 <div class="imgbox"> <img class="goodsimg" src="../../assets/addimg.png"> <input id="file" type="file" class="fileupload" accept="image/*" multiple ca