深入理解Javascript封装DOMContentLoaded事件
最近在写一个Javascript的框架，刚把DOMContentLoaded事件封装好，略带小兴奋，把开发过程中遇到的原理和兼容性问题做篇笔记，省的忘记到处找。
我们在写js代码的时候，一般都会添加window.onload事件，主要是为了在DOM加载完后可以使用getElementById，getElementsByTagName等方法选取DOM元素进行操作，但是window.load会等到加载完DOM、脚本、CSS，最后加载完图片甚至是iframe中的所有资源才会触发，很多时候网页的图片较多较大，要等最后图片这个耗时大户加载完才执行js明显有些太迟了，很多时候都会影响用户体验。
很多js框架都有个document.ready的功能，像JQuery的$(document).ready()方法，可以在DOM加载完就立即执行js代码，让图片自个慢慢加载吧。
document.ready的核心是DOMContentLoaded事件，firefox、chrome、opera、safari、ie9+都可以使用addEventListener(‘DOMContentLoaded’,fn,false)进行事件绑定，而ie6~8不支持DOMContentLoaded事件，所以要针对ie6~8做兼容性处理。
资料上说ie6~8可以使用document.onreadystatechange事件监听document.readyState状态是否等于complete来判断DOM是否加载完毕，如果页面中嵌有iframe的话，ie6~8的document.readyState会等到iframe中的所有资源加载完才会变成complete，此时iframe变成了耗时大户。但是经过测试，即使页面中没有iframe，当readyState等于complete时，实际触发的是onload事件而不是DOMContentLoaded事件，对这点表示惊奇。
还好ie有个特有的doScroll方法，当页面DOM未加载完成时，调用doScroll方法时，就会报错，反过来，只要一直间隔调用doScroll直到不报错，那就表示页面DOM加载完毕了，不管图片和iframe中的内容是否加载完毕，此法都有效。
如果有多个js文件绑定了document.ready事件，为了防止浏览器重复绑定，同时有序执行，可以引入一个事件队列机制来解决。
以上就是document.ready事件的原理和兼容性问题，下面贴段实例代码，为了方便理解执行过程，使用函数封装的模式，执行过程都写在注释里了，如果有不妥之处欢迎指教。
//保存domReady的事件队列
eventQueue = []; //判断DOM是否加载完毕
isReady = false; //判断DOMReady是否绑定
isBind = false; /*执行domReady()
* www.111cn.net
*@param {function}
*@execute 将事件处理程序压入事件队列,并绑定DOMContentLoaded
* 如果DOM加载已经完成，则立即执行
*@caller
*/
function domReady = function(fn){
if (isReady) {
fn.call(window);
}
else{
eventQueue.push(fn);
}; bindReady();
}; /*domReady事件绑定
*
*@param null
*@execute 现代浏览器通过addEvListener绑定DOMContentLoaded,包括ie9+
ie6-8通过判断doScroll判断DOM是否加载完毕
*@caller domReady()
*/
function bindReady = function(){
if (isReady) return;
if (isBind) return;
isBind = true; if (window.addEventListener) {
document.addEventListener('DOMContentLoaded',execFn,false);
}
else if (window.attachEvent) {
doScroll();
};
}; www.111Cn.net /*doScroll判断ie6-8的DOM是否加载完成
*
*@param null
*@execute doScroll判断DOM是否加载完成
*@caller bindReady()
*/
function doScroll = function(){
try{
document.documentElement.doScroll('left');
}
catch(error){
return setTimeout(doScroll,20);
};
execFn();
}; /*执行事件队列
*
*@param null
*@execute 循环执行队列中的事件处理程序
*@caller bindReady()
*/
function execFn = function(){
if (!isReady) {
isReady = true;
for (var i = 0; i < eventQueue.length; i++) {
eventQueue[i].call(window);
};
eventQueue = [];
};
}; //js文件1
domReady(function(){
...
});
//js文件2
domReady(function(){
...
});
/注意，如果是异步加载的js就不要绑定domReady方法，不然函数不会执行，
//因为异步加载的js下载之前，DOMContentLoaded已经触发，addEventListener执行时已经监听不到了
测试页面：都加载了两张很大的图片，onload需要图片加载完才能执行js，DOMContentLoaded只需等到DOM加载完即可执行js。可以打开firebug查看加载过程，每次测试前记得先清理下浏览器缓存。
onload 例子
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>onload</title>
<style type="text/css">
.div{width: 200px;height: 200px;background: red;}
body{background: url('bg.jpg') no-repeat 0 0;}
</style> www.111cn.net
<!--script type="text/javascript" >
function loadscript(url){
var head=document.getElementsByTagName('head')[0];
var s=document.createElement('script');
s.type='text/javascript';
s.src=url;
s.async=false;
head.appendChild(s);
}
loadscript('go.js');
loadscript('onload2.js');
</script-->
<script type="text/javascript" src="go.js"></script>
<script type="text/javascript">
window.onload=function(){
$('.div').mousehover(function(){
$(this).css('background','green');
},function(){
$(this).css('background','red');
});
};
</script>
</head>
<body>
<div class="div">只有等到图片加载完，鼠标移到我身上才会变色呢。<br/><br/><br/><br/><br/>（因为所用框架不支持ie6，请用ie8+测试）</div>
<img src="bg.jpg">
<img src="bg2.jpg">
</body>
</html>
DOMContentLoaded例子
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DOMContentLoaded</title>
<style type="text/css">
.div{width: 200px;height: 200px;background: red;}
body{background: url('bg.jpg') no-repeat 0 0;}
</style>
<!--script type="text/javascript" >
function loadscript(url){
var head=document.getElementsByTagName('head')[0];
var s=document.createElement('script');
s.type='text/javascript';
s.src=url;
s.async=false;
head.appendChild(s);
}
loadscript('go.js');
loadscript('onload2.js');
</script-->
<script type="text/javascript" src="go.js"></script>
<script type="text/javascript">
$(function(){
$('.div').mousehover(function(){
$(this).css('background','green');
},function(){
$(this).css('background','red');
});
})
</script>
</head>
<body>
<div class="div">在图片还没加载完之前，把鼠标移到我身上会变色哦.<br/><br/><br/><br/><br/>（因为所用框架不支持ie6，请用ie8+测试）</div>
<img src="bg.jpg">
<img src="bg2.jpg">
</body>
</html>
深入理解Javascript封装DOMContentLoaded事件的更多相关文章
- 深入理解javascript中的事件循环event-loop
前面的话 本文将详细介绍javascript中的事件循环event-loop 线程 javascript是单线程的语言,也就是说,同一个时间只能做一件事.而这个单线程的特性,与它的用途有关,作为浏览器 ...
- 理解Javascript中的事件绑定与事件委托
最近在深入实践js中,遇到了一些问题,比如我需要为动态创建的DOM元素绑定事件,那么普通的事件绑定就不行了,于是通过上网查资料了解到事件委托,因此想总结一下js中的事件绑定与事件委托. 事件绑定 ...
- 理解JavaScript中的事件轮询
原文:http://www.ruanyifeng.com/blog/2014/10/event-loop.html 为什么JavaScript是单线程 JavaScript语言的一大特点就是单线程,也 ...
- 理解JavaScript中的事件路由冒泡过程及委托代理机制
当我用纯CSS实现这个以后.我开始用JavaScript和样式类来完善功能. 然后,我有一些想法,我想使用Delegated Events (事件委托)但是我不想有任何依赖,插入任何库,包括jQuer ...
- 理解javascript中的事件模型
javascript中有两种事件模型:DOM0,DOM2.而对于这两种的时间模型,我一直不是非常的清楚,现在通过网上查阅资料终于明白了一些. 一. DOM0级事件模型 DOM0级事件模型是早期的事件 ...
- 再次理解javascript中的事件
一.事件流的概念 + 事件流描述的是从页面中接收事件的顺序. 二.事件捕获和事件冒泡 + 事件冒泡接收事件的顺序:
- 理解javascript封装
封装可以被定义为对对象的内部数据表现形式和实现细节进行隐藏.通过封装可以强制实施信息隐藏. 在JavaScript中,并没有显示的声明私有成员的关键字等.所以要想实现封装/信息隐藏就需要从另外的思路出 ...
- 理解JavaScript中的事件流
原文地址:http://my.oschina.net/sevenhdu/blog/332014 目录[-] 事件冒泡 事件捕获 DOM事件流 当浏览器发展到第四代时(IE4和Netscape Comm ...
- 彻底理解javascript 中的事件对象的pageY, clientY, screenY的区别和联系。
说到底, pageY, clientY, screenY的计算,就是要找到参考点, 它们的值就是: 鼠标点击的点----------- 和参考点指点----------的直角坐标系的距离 stacko ...
随机推荐
- 借助百度云API进行人脸识别
前言:本篇博客是笔者第一次使用百度云api进行人脸检测,主要内容包括两部分,一是获取接口,二是借助接口进行人脸检测.笔者也是初步了解这方面的内容,也是参考了杂七杂八的博文,内容可能存在错误及其他毛病, ...
- 我的java问题排查工具单
前言 平时的工作中经常碰到很多疑难问题的处理,在解决问题的同时,有一些工具起到了相当大的作用,在此书写下来,一是作为笔记,可以让自己后续忘记了可快速翻阅,二是分享,希望看到此文的同学们可以拿出自己日常 ...
- 趣图：TCP 与 UDP 的差别
趣图:程序猿和运维狗的工作日常…… 趣图:Java 和 PHP 之间的战斗
- JSP页面导出PDF格式文件
JSP页面导出PDF格式文件基本在前端页面可以全部完成 <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/ ...
- C# 在Winform设计一个耗时较久的任务在后台执行时的状态提示窗口
很多时候,我们需要在窗体中执行一些耗时比较久的任务.比如:循环处理某些文件,发送某些消息等... 单纯的依靠状态栏,用户体验不佳,按下功能按钮后得不到有效的提醒,小白用户绝对会电话给你说“我点了以后就 ...
- 使用django进行发送 邮件
我们来看一下 django发送 邮件的整个流程 第一步:例先去 网易163注册账号并激活发邮件功能 把授权码进行 开启 来到我们的项目setting中进行 一个配置: # 邮箱的配置信息 EMAIL_ ...
- luoguP2664 树上游戏
https://www.luogu.org/problemnew/show/P2664 考虑对于每种颜色包含的点和这些点的子节点建出虚树,发现只要将一个联通块中的东西 Dp + 差分一下就行了 当然要 ...
- Python第四次作业
设计题1: 设计一个本月份日历,输出格式如下: 要求: 1.初始化start_day,end_day两个日期 from datetime import datetime start_day=datet ...
- 精通 WPF UI Virtualization （提升 OEA 框架中 TreeGrid 控件的性能）
原文:精通 WPF UI Virtualization (提升 OEA 框架中 TreeGrid 控件的性能) 本篇博客主要说明如何使用 UI Virtualization(以下简称为 UIV) 来提 ...
- Windows远程连接CentOS图形化界面
1.检查是否安装VNC rpm -q tigervnc tigervnc-server 2.安装安装X-Window # yum check-update # yum groupinstall &qu ...