/**
* HTML动态加载js
* @path {String} src地址必须带有后缀名.js
* @callback {Function} 加载成功的回掉函数
* */
var cache=[];
function addJs(path,callback){
var flag=0;//检查是否加载的状态
for(var i=cache.length;i--;){
cache[i]==path?flag=1:flag=0;
}
if(flag){//如果已经加载则不加载
return;
}
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.src = path;
script.type = 'text/javascript';
head.appendChild(script);
script.onload = script.onreadystatechange = function() {/*判断是否加载成功*/
if (!this.readyState || this.readyState === "loaded" || this.readyState === "complete" ) {
script.onload = script.onreadystatechange = null;
callback();
}
};
cache.push(path);//把加载过的存起来
}
上面提到了readyState属性,下面我们来简单了解一下这个属性
<script>元素有一个readyState属性,它的值随着下载外部文件的过程而改变。readyState 有五种取值:
- uninitialized: 默认状态
- loading: 下载开始
- loaded: 下载完成
- interactive: 下载完成但尚不可用
- complete: 所有数据已经准备好
需要注意的是:微软文档上说,在<script>元素的生命周期中,readyState 的这些取值不一定全部出现,但并没有指出哪些取值总会被用到。