动态加载script标签

 

/**
 * 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 的这些取值不一定全部出现,但并没有指出哪些取值总会被用到。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值