Javascript封装DOMContentLoaded事件实例


Posted in Javascript onJune 12, 2014

最近在写一个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()
 *
 *@param    {function}
 *@execute  将事件处理程序压入事件队列,并绑定DOMContentLoaded
 *          如果DOM加载已经完成,则立即执行
 *@caller
 */
function domReady(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(){
    if (isReady) return;
    if (isBind) return;
    isBind = true;
    if (window.addEventListener) {
        document.addEventListener('DOMContentLoaded',execFn,false);
    }
    else if (window.attachEvent) {
        doScroll();
    };
};
/*doScroll判断ie6-8的DOM是否加载完成
 *
 *@param    null
 *@execute  doScroll判断DOM是否加载完成
 *@caller   bindReady()
 */
function doScroll(){
    try{
        document.documentElement.doScroll('left');
    }
    catch(error){
        return setTimeout(doScroll,20);
    };
    execFn();
};
/*执行事件队列
 *
 *@param    null
 *@execute  循环执行队列中的事件处理程序
 *@caller   bindReady()
 */
function execFn(){
    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查看加载过程,每次测试前记得先清理下浏览器缓存。

Javascript 相关文章推荐
CSS+JS构建的图片查看器
Jul 22 Javascript
15 个 JavaScript Web UI 库
May 19 Javascript
jQuery中绑定事件的命名空间详解
Apr 05 Javascript
我用的一些Node.js开发工具、开发包、框架等总结
Sep 25 Javascript
JavaScript中实现继承的三种方式和实例
Jan 29 Javascript
分享9个最好用的JavaScript开发工具和代码编辑器
Mar 24 Javascript
JavaScript中判断数据类型的方法总结
May 24 Javascript
JS实现双击内容变为可编辑状态
Mar 03 Javascript
ES6 javascript的异步操作实例详解
Oct 30 Javascript
让 babel webpack vue 配置文件支持智能提示的方法
Jun 22 Javascript
Vue 自定义指令功能完整实例
Sep 17 Javascript
小程序实现列表展开收起效果
Jul 29 Javascript
自己封装的javascript事件队列函数版
Jun 12 #Javascript
jquery动态添加删除一行数据示例
Jun 12 #Javascript
checkbox勾选判断代码分析
Jun 11 #Javascript
百度判断手机终端并自动跳转js代码及使用实例
Jun 11 #Javascript
js获取日期:昨天今天和明天、后天
Jun 11 #Javascript
js使用栈来实现10进制转8进制与取除数及余数
Jun 11 #Javascript
删除javascript中注释语句的正则表达式
Jun 11 #Javascript
You might like
php代码调试利器firephp安装与使用方法分析
2018/08/21 PHP
PHP中类与对象功能、用法实例解读
2020/03/27 PHP
js正则表达式中test,exec,match方法的区别说明
2014/01/29 Javascript
node.js中的path.basename方法使用说明
2014/12/09 Javascript
兼容Firefox的Javascript XSLT 处理XML文件
2014/12/31 Javascript
jQuery插件Skippr实现焦点图幻灯片特效
2015/04/12 Javascript
详解jQuery中的deferred对象的使用(一)
2016/05/27 Javascript
AngularJS 过滤与排序详解及实例代码
2016/09/14 Javascript
基于Vue2.0+ElementUI实现表格翻页功能
2017/10/23 Javascript
vue框架搭建之axios使用教程
2018/07/11 Javascript
Vue路由守卫之路由独享守卫
2019/09/25 Javascript
[02:40]2018年度DOTA2最佳新人-完美盛典
2018/12/16 DOTA
Python实现提取文章摘要的方法
2015/04/21 Python
python3读取csv和xlsx文件的实例
2018/06/22 Python
python 借助numpy保存数据为csv格式的实现方法
2018/07/04 Python
Python爬虫动态ip代理防止被封的方法
2019/07/07 Python
python join方法使用详解
2019/07/30 Python
Python+AutoIt实现界面工具开发过程详解
2019/08/07 Python
python制作英语翻译小工具代码实例
2019/09/09 Python
Pytorch 神经网络—自定义数据集上实现教程
2020/01/07 Python
python保留格式汇总各部门excel内容的实现思路
2020/06/01 Python
详细分析Python collections工具库
2020/07/16 Python
canvas拼图功能实现代码示例
2018/11/21 HTML / CSS
THE OUTNET英国官网:国际设计师品牌折扣网站
2016/08/14 全球购物
台湾租车首选品牌:IWS艾维士租车
2019/05/03 全球购物
美国在线购买空气净化器、除湿器、加湿器网站:AllergyBuyersClub
2021/03/16 全球购物
大学毕业生个人自荐信范文
2014/01/08 职场文书
施工材料员岗位职责
2014/02/12 职场文书
家长会标语
2014/06/24 职场文书
2014年度考核工作总结
2014/12/24 职场文书
幼儿园教师安全责任书
2015/05/08 职场文书
个人求职意向书
2015/05/11 职场文书
李强优秀员工观后感
2015/06/16 职场文书
《走遍天下书为侣》教学反思
2016/02/22 职场文书
2019大学生暑期实习心得总结
2019/08/21 职场文书
javascript的var与let,const之间的区别详解
2022/02/18 Javascript