一、为何要实现domReay方法？

举例：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>domready</title>

    <script src="domready.js"></script>

    <script>

          document.getElementById('p01').style.color='#ff0000'; //抛出错误 TypeError: document.getElementById(...) is null

    </script>

</head>

<body>

    <p id="p01">javascript中domready的实现方法</p>

</body>

</html>

我们需要给一些元素的事件绑定处理函数。但问题是，如果那个元素还没有加载到页面上，但是绑定事件已经执行完了，是没有效果的，如上所示。

平时我们都是如此做：

  <script>

    window.onload=function(){

        document.getElementById('p01').style.color='#ff0000';

    }

  </script>

当 onload 事件触发时，需要等待页面上所有的DOM，样式表，脚本，图片，flash都已经加载完成。

当 DOMContentLoaded 事件触发时，仅当DOM加载完成，不包括样式表，图片，flash。

这两个事件大致就是用来避免这样一种情况，将绑定的函数放在这两个事件的回调中，保证能在页面的某些元素加载完毕之后再绑定事件的函数。

当然DOMContentLoaded机制更加合理，因为我们可以容忍图片，flash延迟加载，却不可以容忍看见内容后页面不可交互。

二、domReady实现

function domReady(fn){

    //现代浏览器支持方法

    if(document.addEventListener){

        document.addEventListener('DOMContentLoaded', fn , false);

    }else {

        IEContentLoaded(fn);

    }

    //IE下模拟DOMContentLoaded

    function IEContentLoaded(fn){

        var d = window.document;

        var flag = false;

        //只执行一次用户的回调函数init()

        var init = function () {

            if(!flag){

                flag = true;

                fn();

            }

        };

        //自执行匿名函数

        (function () {

             try {

                 // DOM树未创建之前调用doScroll会抛出错误

                  d.documentElement.doScroll('left');

              } catch(e) {

                  // 延迟再执行一次

                  setTimeout(arguments.callee, 50);

                  return;

              }

              //没有错误就表示DOM树创建完毕，然后立即执行用户回调

              init();

        })();

        //监听document的加载状态

        d.onreadystatechange = function () {

            //如果是在domready之后绑定的函数，就立马执行

            if(d.readyState == 'complete'){

                d.onreadystatechange = null;

                init();

            }

        }

    }

}

HTML代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>domready</title>

    <script src="domready.js"></script>

    <script>

        domReady(function () {

             document.getElementById('p01').style.color='#ff0000';

        })

    </script>

</head>

<body>

    <p id="p01">javascript中domready的实现方法</p>

</body>

</html>

domReady的兼容性实现方法的更多相关文章

  1. IE7,6与Fireofx的CSS兼容性处理方法集结

    CSS对浏览器的兼容性有时让人很头疼,尤其是对于IE6这个问题多多的浏览器版本,从网上收集了IE7,6与Fireofx的兼容性处理方法并整理了一下.对于web2.0的过度,请尽量用xhtml格式写代码 ...

  2. Atitit.提升api兼容性的方法 v3 q326

    Atitit.提升api兼容性的方法 v3 q326 1. Atitit.兼容性的“一加三”策略1 2. 2. 扩展表模式1 3. 3. 同时运行模式1 3.1. 3.1. 完美的后向兼容性2 3.2 ...

  3. 测试web网站兼容性的方法

    随着操作系统,浏览器越来越多样性,导致软件兼容性测试在目前软件测试领域占有很重要的地位,无论是B/S架构还是C/S架构的软件都需要进行兼容性测试,为了充分保证产品的平台无关性,使用户充分感受到软件的友 ...

  4. CSS浏览器兼容性问题解决方法总结

    CSS浏览器兼容解决总结如下: 1. CSS中几种浏览器对不同关键字的支持,可进行浏览器兼容性重复定义 !important 可被FireFox和IE7识别 * 可被IE6.IE7识别 _ 可被IE6 ...

  5. IE7.JS解决IE兼容性问题方法

    转自:http://code.google.com/p/ie7-js/ 使IE5,IE6兼容到IE7模式(推荐) <!--[if lt IE 7]> <script src=&quo ...

  6. 【转】 IE6 IE7 IE8 css bug兼容性解决方法总结归纳

    1:li边距“无故”增加 任何事情都是有原因的,li边距也不例外. 先描述一下具体状况:有些时候li边距会突然增 加很多,值也不固定(只在IE6/IE7有这种现象),让人摸不着头脑,仔细“研究”发现是 ...

  7. 浏览器hack总结 详细的浏览器兼容性解决方法

    由于各浏览器对页面的解析不同,会导致页面在不同浏览器中显示的样式不一致,为了保持页面的统一,经常需要对浏览器进行兼容性问题的调试. CSS Hack 面对浏览器诸多的兼容性问题,经常需要通过CSS样式 ...

  8. IE浏览器兼容性问题解决方法

    如何用一行代码来解决CSS各种IE各种兼容性问题 一行代码来解决CSS在,IE6,IE7,IE8,IE9,IE10 各种兼容性问题. 在站点前端写代码的过程中,非常多时间IE各个版本号的兼容问题非常难 ...

  9. CSS兼容性解决方法!important的IE7，Firefox问题

    转自:http://www.codesky.net/article/201008/139903.html 1. 首先谈谈!important问题的引起(盒模型问题): 在CSS标准中,一个盒模型包括4 ...

随机推荐

  1. python2.7练习小例子（四）

    4):题目:输入某年某月某日,判断这一天是这一年的第几天?     程序分析:以3月5日为例,应该先把前两个月的加起来,然后再加上5天即本年的第几天,特殊情况,闰年且输入月份大于2时需考虑多加一天. ...

  2. java stream 处理分组后取每组最大

    有一个需求功能:先按照某一字段分组,再按照另外字段获取最大的那个 Map<String, HitRuleConfig> configMap = configList.parallelStr ...

  3. ORB-SLAM 代码笔记（五）Frame类

    Frame类的成员变量主要包含从摄像头获取的图像的 1. 特征点信息(关键点+描述字) 2. 尺寸不变特征所用金字塔信息,这些都定义在ORBextractor对象中 3. 词袋模型参数,用于跟踪失败情 ...

  4. js面向对象过程

    var a = new  b(); 等价于 var a={}; a=b.prototype; b.call(a);

  5. SpriteKit游戏开发适配iPad/iPhone6/7/8/Plus及iPhoneX的尺寸及安全区域

    未适配前:Ball球超过屏幕的上下方   适配后:Ball球就在屏幕的可视范围内运动了 一.那么如何适配不同的iPhone.iPhoneX及iPad的屏幕尺寸呢? 我们开发一个App的时候, 通常希望 ...

  6. [转载]压力测试工具siege的用法

    压力测试工具siege 原文:http://blog.csdn.net/qingye2008/article/details/34500949 Siege是Linux下的一个web系统的压力测试工具, ...

  7. CentOS7 最小化安装vmware-tools

    花了一上午的时间在1611上安装vmware-tool,总不能全部顺利安装成功 结合网上资料,整理出正确流程 下载最新的CentOS-7-x86_64-Minimal-1708 安装之后 联网 yum ...

  8. grpc deadlines

    最近在将应用的rpc更换为grpc,使用过程中,发现报“rpc error:code=DeadlineExceeded desc = context deadline exceeded”,这是啥?原来 ...

  9. 【bzoj4070】[Apio2015]雅加达的摩天楼 set+堆优化Dijkstra

    题目描述 印尼首都雅加达市有 N 座摩天楼,它们排列成一条直线,我们从左到右依次将它们编号为 0 到 N−1.除了这 N 座摩天楼外,雅加达市没有其他摩天楼. 有 M 只叫做 “doge” 的神秘生物 ...

  10. 关于IE缓存

    为了提高访问网页的速度,Internet Explorer浏览器会采用累积式加速的方法,将你曾经访问的网页内容(包括图片以及cookie文件等)存放在电脑里.这个存放空间,我们就称它为IE缓存.以后我 ...