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/completeif (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

转载于:https://www.cnblogs.com/Andres/p/6255906.html

window.onload和window.document.readystate的探究相关推荐

jQuery中$(document).ready()和window.onload的区别
$(document) ready()和window onload在表面上看都是页面加载时我们就去执行一个函数或动作,但是在具体的细节上$(document) ready()和window onlo ...
js window.onload 加载多个函数和追加函数
平时做项目经常需要使用window.onload, 用法如下: function func(){alert("this is window onload event!");ret ...
window.onload()方法和window.onscroll()方法
也许你想成为太阳,可你却只是一颗星辰:也许你想成为大树,可你却是一棵小草.于是,你有些自卑.其实,你和别人一样,也是一片风景:做不了太阳,就做星辰,在自己的星座发光发热:做不了大树,就做小草,以自己的 ...
$reday和window.onload()
$(document).reday()作用是类似于javascript中的window.onload()方法,但是还是有却别的! $(document).reday():是DOM结构绘制完毕后执行,不 ...
实现map window.onload加载
之前一直是写C/S的,最近转做B/S了,记录一下自己在工作和学习中的JS小技巧,方便自己今后复习和查阅. JS中默认只带array,有时候会需要key-value的map类功能,虽然array也支持a ...
window.onload事件
!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8"> ...
被引用的外部JS存在window.onload时，判断当前页面是否已存在window.onload，并进行相应处理...
如果页面a.html引用了b.js,b.js里的方法需要在页面资源加载完成后执行,即在window.onload里执行:这时如果a.html里使用了window.onload方法,b.js就不能重复调 ...
about window.onload
在前几天一次练习中因为我要在页面加载完成后调用一个函数,于是我在javascript中用了window. onload,这个方法以前从学习js就在使用,有时还用来调用多个函数.然而我在这次想偷懒,就这 ...
谈谈document.ready和window.onload的区别
在Jquery里面,我们可以看到两种写法:$(function(){}) 和$(document).ready(function(){}) 这两个方法的效果都是一样的,都是在dom文档树加载完之后执行 ...

window.onload和window.document.readystate的探究

window.onload和window.document.readystate的探究相关推荐

最新文章

热门文章