DOMReady实现策略
    * 在页面的DOM树创建完成后（即HTML解析第一步完成）就触发，而无需等待其他资源的加载，即DOMReady实现策略
    * 支持DOMContentLoaded事件的浏览器: 就使用DOMContentLoaded事件
    * 不支持DOMContentLoaded事件的浏览器: 使用Hack兼容
    * 通过IE中的document.documentElement.doScroll('left')来判断DOM树是否创建完毕

代码实现

function myReady(fn){

    if(document.addEventListener){

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

    }else{//低版本浏览器

        IEContentLoaded(fn);

    }

    //IE模拟DOMContentLoaded

    function IEContentLoaded(fn){

        var d = window.document;

        var done = false;

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

        var init = function(){

            if(!done){

                done = true;

                fn();

            }

        };

        (function(){

            try{

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

                d.documentElement.doScroll('left');

            }catch(e){

                //延迟在试一次，

                //var func = function() { alert(func === arguments.callee);}func();

　　            //执行上述代码，可以看到alter出来的结果是true，注意，此处用的是“===”，就是说func与arguments.callee对象类型和值都相等。

                setTimeout(arguments.callee,50);

                return;

            }

            init();

        })();

        //监听document的加载状态

        d.onreadystatechange = function(){

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

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

                d.onreadystatechange = null;

                init();

            }

        }

    }

}

为什么使用domReady来代替onload？

* onload是需要等待页面所有资源都加载完毕，才触发

* domReady是DOM加载完就触发

我们下面看个例子

<!DOCTYPE HTML>

<html>

    <head>

        <meta charset="utf-8">

        <title>domReady</title>

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

    </head>

    <body>

        <div id="showMsg"></div>

        <div>

            <img src="data:images/1.jpg"/>

            <img src="data:images/2.jpg"/>

            <img src="data:images/3.jpg"/>

        </div>

        <script>

            var d = document;

            var msgBox = d.getElementById('showMsg');

            var imgs = d.getElementsByTagName('img');

            var time1 = null,time2 = null;

            myReady(function(){

                msgBox.innerHTML += "dom已加载！<br>";

                time1 = new Date().getTime();

                msgBox.innerHTML += "时间戳:" + time1 + "<br>";

            });

            window.onload = function(){

                msgBox.innerHTML += "onload已加载！<br>";

                time2 = new Date().getTime();

                msgBox.innerHTML += "时间戳:" + time2 + "<br>";

                msgBox.innerHTML += "domReady比onload快" + (time2 - time1) + "ms<br>";

            };

        </script>

    </body>

</html>

javascript之DOMReady的更多相关文章

  1. JavaScript DOM-Ready 机制

    IE9开始和其他现代浏览器可以通过绑定DOMContentLoaded事件:IE9之前的的浏览器需要绑定onreadystatechange事件并等待readyState为"complete ...

  2. domReady的兼容性实现方法

    一.为何要实现domReay方法? 举例: <!DOCTYPE html> <html lang="en"> <head> <meta c ...

  3. html dom的加载

    操作HTML DOM文档的一个难题是,你的JavaScript代码可能在DOM完全载入之前运行,这会导致你的代码产生一些问题.页面加载时浏览器内部操作的顺序大致是这样的: 1. HTML被解析. 2. ...

  4. -_-#【Dom Ready / Dom Load】

    Dom Ready和Dom Load DOM Ready 详解 javascript的domReady 域名解析 - 加载html - 加载js和css - Dom Ready - 加载图片等其他信息 ...

  5. QQ浏览器等window.innerHeight首次读取的高度不正确的解决办法

    问题描述 移动端的页面,需要处理首屏为一满屏.并且,采用javascript计算高度来设置容器高度的方案. <!DOCTYPE html> <html> <head> ...

  6. 深入浅出DOM基础——《DOM探索之基础详解篇》学习笔记

    来源于:https://github.com/jawil/blog/issues/9 之前通过深入学习DOM的相关知识,看了慕课网DOM探索之基础详解篇这个视频(在最近看第三遍的时候,准备记录一点东西 ...

  7. 解决window.onload延迟加载问题

    window.onload方法,表示当页面所有的元素都加载完毕,并且所有要请求的资源也加载完毕才触发执行function这个匿名函数里边的具体内容.这样肯定保证了代码在domReady之后执行.使用w ...

  8. 谈谈DOMContentLoaded：Javascript中的domReady引入机制

    一.扯淡部分 回想当年,在摆脱写页面时js全靠从各种DEMO中copy出来然后东拼西凑的幽暗岁月之后,毅然决然地打算放弃这种处处“拿来主义”的不正之风,然后开启通往高大上的“前端攻城狮”的飞升之旅.想 ...

  9. JavaScript进阶之路——认识和使用Promise，重构你的Js代码

    一转眼,这2015年上半年就过去了,差不多一个月没有写博客了,"罪过罪过"啊~~.进入了七月份,也就意味着我们上半年苦逼的单身生活结束了,从此刻起,我们要打起十二分的精神,开始下半 ...

随机推荐

  1. Swift常用语法示例代码（一）

    此篇文章整理自我以前学习Swift时的一些练习代码,其存在的意义多是可以通过看示例代码更快地回忆Swift的主要语法. 如果你想系统学习Swift或者是Swift的初学者请绕路,感谢Github上Th ...

  2. Android之使用AchartEngineActivity引擎绘制柱状图、曲线图

    1.简介 AChartEngine(简称ACE)是Google的一个开源图表库(for Android).它功能强大,支持散点图.折线 .关于里面类的具体使用,请下载响应的文档说明(主页上有). 2. ...

  3. jq实现竞拍倒计时

    1jq的效果代码 //全局变量用于存储当前时间 var nows; function rightZeroStr(v) { ) { " + v; } return v + "&quo ...

  4. 使用phpExcel向mysql数据库导入excel

    使用phpExcel向mysql数据库导入excel from:http://blog.163.com/dustye_l/blog/static/172439513201242491016834/ 使 ...

  5. 01 MySQL锁概述

    锁是计算机协调多个进程或线程并发访问某一资源的机制.在数据库中,除传统的计算资源(如CPU.RAM.I/O 等)的争用以外,数据也是一种供许多用户共享的资源.如何保证数据并发访问的一致性.有效性是所有 ...

  6. struts2.1笔记03：AOP编程和拦截器概念的简介

    1.AOP编程 AOP编程,也叫面向切面编程(也叫面向方面):Aspect Oriented Programming(AOP),是目前软件开发中的一个热点,也是Spring框架中的一个重要内容.利用A ...

  7. KindEditor图片上传到七牛云

    自己做了一个网站,编辑器用的是KindEditor,平时会涉及到KindEditor自带的图片上传,但是服务器用的是虚拟主机,没多少空间,就一直想着把图片放在免费的云存储空间,之前看KindEdito ...

  8. windows进程的创建方法

    1.WinExec(LPCSTR lpCmdLine,UINT uCmdShow) >>参数: lpCmdLine:指定程序的相对路径或绝对路径,命令行参数 uCmdShow:指定窗口的显 ...

  9. Linux下安装配置Node及memcached

    这篇主要是记录Linux下安装Node及memcached遇到的问题及安装配置过程,方便日后查阅 Node安装及配置 [root@hostname ~]tar zxvf node-v0.12.4.ta ...

  10. CentOS(九)--与Linux文件和目录管理相关的一些重要命令①

       接上一篇文章,实际生产过程中的目录管理一定要注意用户是root 还是其他用户. 一.目录与路径 1.相对路径与绝对路径 因为我们在Linux系统中,常常要涉及到目录的切换,所以我们必须要了解 & ...