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(); } } |
onreadystatechange和onload区别分析的更多相关文章
- addEventListener()及attachEvent()区别分析
Javascript 的addEventListener()及attachEvent()区别分析 Mozilla中: addEventListener的使用方式: target.addEventLis ...
- C++中关于[]静态数组和new分配的动态数组的区别分析
这篇文章主要介绍了C++中关于[]静态数组和new分配的动态数组的区别分析,很重要的概念,需要的朋友可以参考下 本文以实例分析了C++语言中关于[]静态数组和new分配的动态数组的区别,可以帮助大家加 ...
- Java中Comparable和Comparator接口区别分析
Java中Comparable和Comparator接口区别分析 来源:码农网 | 时间:2015-03-16 10:25:20 | 阅读数:8902 [导读] 本文要来详细分析一下Java中Comp ...
- Oracle nvchar2和varchar2区别分析
Oracle nvchar2和varchar2区别分析: [注意]VARCHAR2是Oracle提供的特定数据类型,Oracle可以保证VARCHAR2在任何版本中该数据类型都可以向上和向下兼容.VA ...
- ready与onload区别一
<!DOCTYPE html><html> <head> <title>ready与onload区别一</title> <meta c ...
- jQuery中的.bind()、.live()和.delegate()之间区别分析
jQuery中的.bind()..live()和.delegate()之间区别分析,学习jquery的朋友可以参考下. DOM树 首先,可视化一个HMTL文档的DOM树是很有帮助的.一个简单的 ...
- jQuery中的bind() live() delegate()之间区别分析
jQuery中的bind() live() delegate()之间区别分析 首先,你得要了解我们的事件冒泡(事件传播)的概念,我先看一张图 1.bind方式 $('a').bind('click', ...
- C# Parse和Convert的区别分析
原文:C# Parse和Convert的区别分析 大家都知道在进行类型转换的时候有连个方法供我们使用就是Convert.to和*.Parse,但是疑问就是什么时候用C 什么时候用P 通俗的解释大家都知 ...
- jquery中attr和prop的区别分析
这篇文章主要介绍了jquery中attr和prop的区别分析的相关资料,需要的朋友可以参考下 在高版本的jquery引入prop方法后,什么时候该用prop?什么时候用attr?它们两个之间有什么区别 ...
随机推荐
- 19 SpringMVC 拦截器
1. 拦截器的概述(1)SpringMVC框架中的拦截器用于对处理器进行预处理和后处理的技术.(2)可以定义拦截器链,连接器链就是将拦截器按着一定的顺序结成一条链,在访问被拦截的方法时,拦截器链 中的 ...
- SQL Server 中的窗口函数(2012 新函数)
简介 SQL Server 2012之后对窗口函数进行了极大的加强,但对于很多开发人员来说,对窗口函数却不甚了解,导致了这样强大的功能被浪费,因此本篇文章主要谈一谈SQL Server中窗口函数的概念 ...
- 使用 Redis 的 sorted set 实现用户排行榜
要求:实现一个用户排行榜,用户数量有很多,排行榜存储的是用户玩游戏的分数,对排行榜的读取压力比较大,如何实现? 思路分析: 实现排行榜,可以考虑使用 Redis 的 zset 结构: 用户数量很多的话 ...
- Word 查找替换高级玩法系列之 -- 通配符大全B篇
未完 ...... 点击访问原文(进入后根据右侧标签,快速定位到本文)
- 51book机票接口对接,吐血整理(含PHP封装代码)
前言 最近在对接51book的机票接口,遇到了挺多坑,所以整理一份作为记录 机票有两个不同的接口,一个是机票,另一个是保险 一.申请 要接51book的机票,首先是要申请账号,这时候应该是有客户经理跟 ...
- 快速排序(Quick Sort)C语言
已知数组 src 如下: [5, 3, 7, 6, 4, 1, 0, 2, 9, 10, 8] 快速排序1 在数组 src[low, high] 中,取 src[low] 作为 关键字(key) . ...
- 下载并使用MNIST数据集
TensorFlow提供了一个库,可以直接用来自动下载与安装MNIST. MNIST里包含3个数据集:第一个是训练数据集(mnist.train.images),另外两个分别是测试数据集(mnist. ...
- pytest_05_fixture之conftest.py
前面一篇讲到用例加setup和teardown可以实现在测试用例之前或之后加入一些操作,但这种是整个脚本全局生效的,如果我想实现以下场景: 用例1需要先登录,用例2不需要登录,用例3需要先登录.很显然 ...
- hystrix中request cache请求缓存
有一个概念,叫做reqeust context,请求上下文,一般来说,在一个web应用中, 我们会在一个filter里面,对每一个请求都施加一个请求上下文,就是说,tomcat容器内,每一次请求,就是 ...
- C#静态字段的两个用处
静态字段的2个常用方法 (1)记录已实例化的对象的个数 (2)存储必须在所有实例化之间共享的值 (1)记录已实例化的对象的个数 现在某个培训机构啊,要开设一个学理发的班,计划招5人,只要人数够5人就开 ...