加载顺序 ready onload onreadystatechange

最新推荐文章于 2022-09-29 22:18:51 发布

江南风雨2013

最新推荐文章于 2022-09-29 22:18:51 发布

阅读量511

点赞数

文章标签：加载顺序 ready onload on

js文件是异步加载，

js是在什么时候被加载执行的

动态引入的外部 JS 文件在各浏览器中的加载顺序不一致

1/ready，表示文档结构已经加载完成（不包含图片等非文字媒体文件）；比如一张图片只要<img>标签完成，不用等这个图片加载完成，就可以设置图片的宽高的属性或样式等；

2/onload，指示页面包含图片等文件在内的所有元素都加载完成。比如一张图片要等这个图标加载完成之后才能设置图片的宽高的属性或样式等；

支持该事件的 HTML 标签：

<body>, <frame>, <frameset>, <iframe>, <img>, <link>, <script>

支持该事件的 JavaScript 对象：

image, layer, window

`1`	`第一种：window.onload =` `function(){}`

`2`	`第二种： window.onload ＝ functionName;` `//注意:没有括号`

`1`	`<body` `onload="init();">`

与 window.onload事件相比， ready()具有较高的执行优先级

3/document.onreadystatechange 当页面加载状态改变的时候执行这个方法。
用法：

`1`	`document.onreadystatechange =` `function(){`

`2`	`if(document.readyState=="complete")`

3 {

`4`	`window.open('http://www.aspbc.com'); //这里是你要做的事`

5 }

6 }

onreadystatechange 事件通常用在基于 XMLHttpRequest 对象的 AJAX 应用中，当的该对象的 load state 改变时，会触发此事件。

但在 IE 中 onreadystatechange 事件是其私有实现的，用于数据加载的 IMG、SCRIPT 和 LINK 标记，常常被误用 onreadystatechange 事件而导致在非 IE 浏览器中无法得到预期结果。

造成的影响

onreadystatechange 事件处理在各浏览器支持不一致，可能会导非预期结果。

onreadystatechange 事件是微软对 IE 浏览器的私有事件扩充，所有元素都存在 onreadystatechange 事件。
下列元素对象总可以触发此事件，因为他们均会加载数据：APPLET，DOCUMENT，FRAME，FRAMESET，IFRAME，IMG，LINK，OBJECT，SCRIPT 和 XML 元素。
其他元素对象仅当 DHTML Behavior 被追加后会触发 onreadystatechange 事件。

解决方案

在现行 W3C 标准规范中仅有 XmlHttpRequest 对象中存在 onreadystatechange 事件 ( 请参考 XMLHttpRequest 规范 )。

对于其他元素或对象请慎用 onreadystatechange 事件，因为他只有 IE 浏览器支持，而 Opera 浏览器则只是部分支持。