按需加载JS和css

/*** js和css按需加载 ***/
function loadJsCss(url, callback ){// 非阻塞的加载 后面的js会先执行
  var isJs = /\/.+\.js($|\?)/i.test(url) ? true : false;
  function onloaded(script, callback){//绑定加载完的回调函数
    if(script.readyState){ //ie
      script.attachEvent('onreadystatechange', function(){
        if(script.readyState == 'loaded' || script.readyState == 'complete'){
          script.className = 'loaded';
          callback && callback.constructor === Function && callback();
        }
      });
    }else{
      script.addEventListener('load',function(){
        script.className = "loaded";
        callback && callback.constructor === Function && callback();
      }, false); 
    }
  }
  if(!isJs){ //加载css
    var links = document.getElementsByTagName('link');
    for(var i = 0; i < links.length; i++){//是否已加载
      if(links[i].href.indexOf(url)>-1){ 
        return; 
      }
    }
    var link = document.createElement('link');
    link.type = "text/css";
    link.rel = "stylesheet";
    link.href = url;
    var head = document.getElementsByTagName('head')[0]; 
    head.insertBefore(link,head.getElementsByTagName('link')[0] || null );
  }else{ //加载js
    var scripts = document.getElementsByTagName('script');
    for(var i = 0; i < scripts.length; i++){//是否已加载
      if(scripts[i].src.indexOf(url)>-1 && callback && (callback.constructor === Function) ){ 
      //已创建script
        if(scripts[i].className === 'loaded'){//已加载
          callback();
        }else{//加载中
          onloaded(scripts[i], callback);
        }
        return; 
      }
    }
    var script = document.createElement('script');
    script.type = "text/javascript";
    script.src = url; 
    document.body.appendChild(script);
    onloaded(script, callback); 
    
  }
}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值