onreadystatechange和onload区别分析
onreadystatechange和onload区别分析
script加载
IE的script 元素只支持onreadystatechange事件,不支持onload事件。
FireFox,Opera, Chorme, IE11+ 和Safari3+的script 元素不支持onreadystatechange事件,只支持onload事件。
如果要在一个<script src="xx.js"> 加载完成执行一个操作,FF使用onload事件就行了,IE下则要结合onreadystatechange事件和this.readyState
以下是IE的一个例子:
1
|
<script type= "text/javascript" src= "xx.xx" onreadstatechange= "if(this.readyState=='load') alert('loaded');" ></script> |
this.readyState的值为'loaded'或者'complete'都可以表示这个script已经加载完成.
【Firefox, Opera, Chorme, IE11+ 和Safari3+会在<script>节点接收完成之后发出一个load 事件。你可以监听这一事件,以得到脚本准备好的通知】
【Internet Explorer(IE10及以下版本)支持另一种实现方式,它发出一个readystatechange事件。<script>元素有一个readyState属性,它的值随着下载外部文件的过程而改变。readyState 有五种取值】
微软文档上说,在<script>元素的生命周期中,readyState 的这些取值不一定全部出现,但并没有指出哪些取值总会被用到。实践中,我们最感兴趣的是“loaded”和“complete”状态。Internet Explorer 对这两个readyState值所表示的最终状态并不一致,有时<script>元素会得到“loaded”却从不出现“complete”,但另外一些情况下出现“complete”而用不到“loaded”。最安全的办法就是在readystatechange 事件中检查这两种状态,并且当其中一种状态出现时,删除readystatechange事件句柄(保证事件不会被处理两次)
var script = document.createElement("script") script.type = "text/javascript"; //Internet Explorer script.onreadystatechange = function(){ if (script.readyState == "loaded" || script.readyState == "complete"){ script.onreadystatechange = null; alert("Script loaded."); } }; script.src = "file1.js"; document.getElementsByTagName_r("head")[0].appendChild(script); |
如何结合IE和FF等的区别?参考一下jquery的源码:
var script = document.createElement('script'); script.src="xx.js"; script.onload = script.onreadystatechange = function(){ if( ! this.readyState //这是FF的判断语句,因为ff下没有readyState这个值,IE的readyState肯定有值 || this.readyState=='loaded' || this.readyState=='complete' // 这是IE的判断语句 ){ alert('loaded'); } }; |
上面是根据dom加载完去判断,如果根据dom未加载完去判断如下:
var script = document.createElement('script'); script.src="xx.js"; script.onload = script.onreadystatechange = function(){ if( this.readyState && this.readyState=='loading' ){ return } alert('loaded') }; |
大多数情况下,你希望调用一个函数就可以实现JavaScript 文件的动态加载。下面的函数封装了标准实现和IE 实现所需的功能:
function loadScript(url, callback){ var script = document.createElement ("script") script.type = "text/javascript"; if (script.readyState){ //IE script.onreadystatechange = function(){ if (script.readyState == "loaded" || script.readyState == "complete"){ script.onreadystatechange = null; callback(); } }; } else { //Others script.onload = function(){ callback(); }; } script.src = url; document.getElementsByTagName_r("head")[0].appendChild(script); } |
document加载
一个document
的 Document.readyState 属性描述了文档的加载状态。
loading / 正在加载:document
仍在加载。
interactive / 可交互:文档已被解析,"正在加载"状态结束,但是诸如图像,样式表和框架之类的子资源仍在加载。
complete / loaded 完成:文档和所有子资源已完成加载。表示 load
状态的事件即将被触发。
当该属性值发生变化时,会在document
对象上触发readystatechange
事件。
(当document
文档正在加载时,返回"loading"。当文档结束渲染但在加载内嵌资源时,返回"interactive",并引发DOMContentLoaded
事件。当文档加载完成时,返回"complete",并引发load
事件。)
语法
var string = document.readyState; |
例子
// 模拟DOMContentLoaded document.onreadystatechange = function () { if (document.readyState == "interactive") { initApplication(); } } // 模拟 load事件 document.onreadystatechange = function () { if (document.readyState == "complete") { initApplication(); } } |
原文地址:https://www.cnblogs.com/nbxcnxvcnb/p/12080698.html
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- R语言中的广义线性模型(GLM)和广义相加模型(GAM):多元(平滑)回归分析保险资金投资组合信用风险敞口
- 来玩 TencentOS tiny 物联网终端操作系统
- LeetCode | 66.加一
- PNN:Product-based Neural Networks for User Response Prediction
- Redis | Redis Pub/Sub相关命令
- nginx upstream header过大是啥情况
- 8个写JavaScript代码的小技巧
- .NET Core中间件与依赖注入的一些思考
- 如何审计MySQL 8.0中的分类数据查询?
- 聊一个 GitHub 上开源的 RBAC 权限管理系统,很6!
- Spring AOP,应该不会有比这更详细的介绍了!
- 我又发现 Spring Security 中一个小秘密!
- OpenCV的实用图像处理操作案例分享
- CentOS 7上搭建 Zabbix4.0,一次性成功,收藏了!
- 超全!我整理一波最常用的开源项目