window.onload和window.document.readystate的探究
在编写前端页面的时候，我们时常需要对页面加载的状态进行判断，以便进行相应的操作。
比如在移动端，时常需要在页面完全加载完成之前，先显示一个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的探究的更多相关文章
- JS window.onload 和模拟document.ready.
hhhhhhhhhhhhhhhh hhhhhhhhhhhhhhhh ttttttttttttt 注意观察 事件执行的 先后顺序. 总的来说,window.onload()方法是必须等到页面内包括图片的 ...
- js页面加载的几种方式的速度： window.onload、 $(window).load、 $(function(){}）、 $(document).ready(function () {})、onload=‘asd（）’
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- 关于window.onload，window.onbeforeload与window.onunload
★ window.onload 当页面加载完毕的时候执行,即在当前页面进行其他操作之前执行.如,刚进入某个网页的弹窗提示. ( 与window.onload相近的可以参考我写的另外一篇记录&qu ...
- window.onload和window.onscroll
之前我的一个页面里写了引入了2个js,一个是包含置顶的侧面客服,一个是定位导航.2个开始都用了window.onload,发现第一个js的定位导航没有显示,被第2个js覆盖了,当我去掉第2个js的wi ...
- body里面的onload和window.onload，window.load的区别
区别:body里面的onload是在“页面加载完成后执行的动作”window里面的onload是在“页面加载时执行的动作” window.load这个应该只是表明事件方法,但并未执行,比如click表 ...
- Window.onload与$（document）.ready()的对比
- jQuery $(document).ready() 与window.onload的区别
ps:jQuery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法,虽然具有类似的效果,但是它们在触发操作的时间上存在着微妙的差异. 在j ...
- $(document).ready() 与 window.onload 之间的区别
1.执行时机 window.onload 是网页中所有的元素都加载到浏览器后才执行 $(document).ready() 是dom完全就续就可以调用 例如:如果给一副图片添加点击事件,window. ...
- window.onload与$(document).ready()区别
2013-12-08 17:11:34 window.onload一次只能执行一个程序,而$(document).ready()可以按照先后顺序执行多个程序. eg: function one(){ ...
随机推荐
- 【P1825】表达式整除
又自己写出来了好开心OvO 原题: 24点这个游戏好多人都玩过,就是给你4个数,添加相应的运算符,是否可以得到结果是24.小x在玩了很多遍这个游戏之后,想把这个游戏给改变一下.给你n个整数,在n个整数 ...
- grunt压缩js文件
grunt是node中很好的管理项目的工具,利用它可以实现对整个项目的管理,避免很多重复性的工作如合并.压缩,检查语法等. 使用grunt首先要安装node环境,nodejs官网http://node ...
- Linux-TCP Queue的一些问题
先来回顾下三次握手里面涉及到的问题:1. 当 client 通过 connect 向 server 发出 SYN 包时,client 会维护一个 socket 等待队列,而 server 会维护一个 ...
- DEX 方法超过64K限制和gradle编译OOM问题解决
如果你是一个android开发者,你至少听说过的Dalvik的蛋疼的64K方法限制.概括地说,在一个DEX文件,你可以调用很多的方法,但你只能调用它们最前面的65,536个 ,因为这是在方法调用集合中 ...
- HTTP长连接和短连接
1.HTTP协议的五大特点1)支持客户/服务器模式2)简单快速3)灵活4)无连接每次连接只处理一个请求,服务器处理完客户的请求,并受到客户的应答后,断开连接.5)无状态协议不会记录服务器客户端状态. ...
- Winform水印
本文实例展示了WinForm实现为TextBox设置水印文字功能,非常实用的技巧,分享给大家供大家参考. 关键代码如下 using System; using System.Runtime.Inter ...
- rabbitmq 重复ACK导致消息丢失
rabbitmq 重复确认导致消息丢失 背景 rabbitmq 在应用场景中,大多采用工作队列 work-queue的模式. 在一个常见的工作队列模式中,消费者 worker 将不断的轮询从队列中拉取 ...
- kvm
硬件,os,内核模块,用户空间工具,命令行具体参数,日志 [root@localhost ~]# yum install pciutils [root@localhost ~]# lscpu;lspc ...
- 用RollViewPager实现Android滚动banner
最近项目中要实现一个循环滚动的banner,效果如下图 这个自己写实在是不方便,而且写出来也很难保证没有bug和性能缺陷,好在网上有人开源了一个实现滚动banner的RollViewPager框架,亲 ...
- [转载]Eclipse调试Java的10个技巧
原文:http://www.oschina.net/question/82993_69439 我也特别喜欢的是Drop to frame. 在看这篇文章前,我推荐你看一下Eclipse 快捷键手册,我 ...