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();
  }
}

参考

document.readyState

Web动态加载JS外部文件(script标签)

巴特西

onreadystatechange和onload区别分析

onreadystatechange和onload区别分析

script加载

document加载

语法

例子

参考

最新文章

热门文章