在编写前端页面的时候，我们时常需要对页面加载的状态进行判断，以便进行相应的操作。

比如在移动端，时常需要在页面完全加载完成之前，先显示一个loading的图标，等待页面完成加载完成后，才显示出真正要展现的页面元素。见代码1：

<html>

    <head>

        <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>

        <script>

            function isLoaded(t)

            {

                if (window.document.readyState == "complete")

                {

                    $("#loading").hide();

                    $("#wrapper").show();

                    if (t) {

                        window.clearInterval(t);

                    }

                }

            }

            t = window.setInterval(function () {

                isLoaded(t);

            }, 700);

        </script>

        <style>

            #wrapper{display:none;}

        </style>

    </head>

    <body>

        <img width="50" id="loading" style="left: 46%; top: 40%; position: absolute;" alt="loading" src="./images/loading.gif"/>

        <div id="wrapper">your content</div>

    </body>

</html>

　　                                                                                            代码1

代码1是一个移动端加载文件方式的简化版，每700ms去调用isLoaded函数，通过检测window.document.readyState的状态，判断是否页面资源加载完全。

如果是，隐藏loading的gif图标，显示页面内容，清除定时器。

言归正传，说到本文主题，页面加载状态，通过什么来判断呢？目前博主知道主要是两个，window.onload和window.document.readystate（亲测都兼容

IE7+，chrome,firefox）,其他的没有测，不过应该都兼容,从两巨头w3c和whatwg的官方文档里都能找到。

1.先说window.onload,他的event handle event type是load.如图1：

图1（来源：https://html.spec.whatwg.org/#event-load）

当由window触发时，是当document加载完成，并且所有resource都加载完毕的时候触发。见代码2。

<!DOCTYPE html>

<html>

    <head>

        <title>TODO supply a title</title>

        <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <script>

            var onloadFunc = function(){

                alert(document.getElementsByTagName("img")[0].complete);//true

            };

            window.onload = onloadFunc;

        </script>

    </head>

    <body >

        <div id="div1"><p>TODO write content</p>

        </div>

        <img src="http://dl.qqpy.sogou.com/qq.pinyin.cn_new/banner2.jpg?t=111" />

    </body>

</html>

代码2

document.getElementsByTagName("img")[0].complete，所有浏览器支持，判断的是图片是否加载完成，这里弹出的是true。(参考)

   2. 再说window.document.readystate。这个属性有三个值 loading /interactive/complete。官方解释，如图2：

图2（参考：https://html.spec.whatwg.org/#dom-img-complete）

document正在下载的时候，返回loading；document完成了解析，但是资源还在下载的时候，返回interactive；document加载完成，并且所有resource都加载完毕,返回complete.（亲测，ie7+,chrome,firefox都可以）。本文开篇所举的例子，即是使用complete判断document和其资源是否加载完毕。下边例子，进一步验证返回interactive的情况，见代码3。

<!DOCTYPE html>

<html>

    <head>

        <title>TODO supply a title</title>

        <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <script>

            var readyStateFunc = function () {

                //loading /interactive/complete

                if (window.document.readyState == 'interactive') {

                    alert(document.getElementsByTagName("img")[0].complete);//false

                    clearInterval(id_of_setinterval);

                }

            };

            id_of_setinterval = setInterval(readyStateFunc, 1);

        </script>

    </head>

    <body >

        <div id="div1"><p>TODO write content</p>

        </div>

        <img src="http://dl.qqpy.sogou.com/qq.pinyin.cn_new/banner2.jpg?t=111" />

    </body>

</html>

代码3

document.getElementsByTagName("img")[0].complete返回的是false。说明，图片还没有加载完成。

  3.window.onload和window.document.readystate==complete的触发先后顺序如何呢，经测试，onload先发生。

　　

参考资料：

1.http://mutongwu.iteye.com/blog/2207626

//后续2017.1.8

1.实际编程比较关心的，如何在dom加载完成而资源不用加载的情况下触发（例如jquery的$(document).ready就是这样）。经过查资料，得出大家通用的做法，是监听DOMContentLoaded 事件，这个在IE9+,现代浏览器都可以使用。对于IE6-8,采用的方法是判断document.documentElement.doScroll();是否会出错。“MSDN 关于 JScript 的一个方法有段不起眼的话，当页面 DOM 未加载完成时，调用 doScroll 方法时，会产生异常。那么我们反过来用，如果不异常，那么就是页面DOM加载完毕了！”

WEB技术实验所给出的实例。

jquery的$(document).ready实现分析可以参考这里。

同时，jquery的作者没有采用document.readystate的interactive属性来判断dom加载完成，而资源没有加载完成的情况。原因是有如下bug:

http://bugs.jquery.com/ticket/12282#comment:15但是实际使用中，好像出现这种bug的问题很少。

更详细的一个解释，见http://stackoverflow.com/questions/3665561/document-readystate-of-interactive-vs-ondomcontentloaded

window.onload和window.document.readystate的探究的更多相关文章

  1. JS window.onload 和模拟document.ready.

    hhhhhhhhhhhhhhhh hhhhhhhhhhhhhhhh ttttttttttttt 注意观察 事件执行的 先后顺序. 总的来说,window.onload()方法是必须等到页面内包括图片的 ...

  2. js页面加载的几种方式的速度： window.onload、 $(window).load、 $(function(){}）、 $(document).ready(function () {})、onload=‘asd（）’

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  3. 关于window.onload，window.onbeforeload与window.onunload

    ★  window.onload  当页面加载完毕的时候执行,即在当前页面进行其他操作之前执行.如,刚进入某个网页的弹窗提示. (  与window.onload相近的可以参考我写的另外一篇记录&qu ...

  4. window.onload和window.onscroll

    之前我的一个页面里写了引入了2个js,一个是包含置顶的侧面客服,一个是定位导航.2个开始都用了window.onload,发现第一个js的定位导航没有显示,被第2个js覆盖了,当我去掉第2个js的wi ...

  5. body里面的onload和window.onload，window.load的区别

    区别:body里面的onload是在“页面加载完成后执行的动作”window里面的onload是在“页面加载时执行的动作” window.load这个应该只是表明事件方法,但并未执行,比如click表 ...

  6. Window.onload与$（document）.ready()的对比

  7. jQuery $(document).ready() 与window.onload的区别

    ps:jQuery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法,虽然具有类似的效果,但是它们在触发操作的时间上存在着微妙的差异. 在j ...

  8. $(document).ready() 与 window.onload 之间的区别

    1.执行时机 window.onload 是网页中所有的元素都加载到浏览器后才执行 $(document).ready() 是dom完全就续就可以调用 例如:如果给一副图片添加点击事件,window. ...

  9. window.onload与$(document).ready()区别

    2013-12-08 17:11:34 window.onload一次只能执行一个程序,而$(document).ready()可以按照先后顺序执行多个程序. eg: function one(){ ...

随机推荐

  1. 【jq】c#零基础学习之路（2）循环和分支

    一.循环语句 1).do { //循环体,先运行一次. } while (true); 2). while (true) { //循环体 } 3). for (int i = 0; i < le ...

  2. 关于android R.layout.没有出现自己写的布局解决方法

    直接上解决方法 1.若import了androi.R直接删除,导入自己包下的R文件,例如com.example.my.R 2.若上面的做了后还有错误,应该是包名不一致导致的,即com.example. ...

  3. 【HDU1960】Taxi Cab Scheme（最小路径覆盖）

    Taxi Cab Scheme Time Limit: 5000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)T ...

  4. Torch 日志文件的保存 logroll

    Torch 日志文件的保存 logroll 怎样将 Torch 在终端显示的信息,保存到 log 文件中 ?   现在介绍一种方法:利用 logroll 的方式.  参考 https://github ...

  5. JVM内存模型和性能优化 转

    JVM内存模型和性能优化 JVM内存模型优点 内置基于内存的并发模型:      多线程机制 同步锁Synchronization 大量线程安全型库包支持 基于内存的并发机制,粒度灵活控制,灵活度高于 ...

  6. select 触发事件

    需求:现在需要获取用户选择的选项,同时获取里面自定义的字段. 因为option没法设置事件 <select class="form-control js-example-basic-s ...

  7. 控制HTML Input只能输入数字和小数点

    本文介绍两种控制在<input type="text" name="name" value="0" />中只允许输入数字和小数点 ...

  8. Tomcat部署Solr4.10.4

    前段时间学习solr,兴致勃勃的从官网下载到solr5.3.0最新版本,然后在后期部署时出现了很多问题.首先,4.0到5.0是个大版本更新,下载 的压缩包的文件结构有了很多变化,导致网上很多关于sol ...

  9. Java基础--serialVersionUID

    Java基础--serialVersionUID serialVersionUID作用: 序列化时为了保持版本的兼容性,即在版本升级时反序列化仍保持对象的唯一性.有两种生成方式: 一个是默认的1L,比 ...

  10. C#如何利用QQ邮箱SMTP发送邮件

    public void SendEmail() { MailMessage msg = new MailMessage(); msg.To.Add("to@qq.com");//收 ...