js 利用 ajax 加载 js ,显示加载进度 ,严格按照js的顺序先后加载到页面

js 利用 ajax 加载 js ,显示加载进度 ,严格按照js的顺序先后加载到页面 , 

做手机端开发时,发现一个问题,有些浏览器,在网速比较慢的情况下,js文件没有加载完,后续的调用已经开始调用了,导致出错。后来使用此法,保证了任何时候都完全是按照js的先后顺序执行的。

源码:

/** 
* js 利用 ajax 加载 js ,显示加载进度 ,严格按照js的顺序先后加载到页面
* 原理:利用 ajax 异步多线程快速加载, 每个文件加载完成后存入到加载完成数组中, 
*      显示到页面时完全按传入的顺序加入到页面 
* @param {array}    files              要加载的文件列表,显示时也按照此顺序一个一个加入到页面
* @param {fun}      funOk              加载完成后的回调
* @param {fun}      funPercent         加载过程中的回调
*/    
function ajaxLoadJs(files,funOk,funPercent) {
   var fileData = [];//记录加载完的文件
   var oknum = 0 ; //加载完成的数量   
   //循环异步加载文件
   for (var i = 0; i < files.length; i++) {
      loadfile(files[i]);
   }
   //加载文件
   function loadfile(file) {
      $.ajax({
          url: file,
          dataType: "text",
          success: function (data) {
            oknum++;
              fileData[file] = data; //加载成功写入数组
              loadok(file);//调用成功后的处理
          },
          error: function (XMLHttpRequest, textStatus, errorThrown) {
              console.log("加载失败:"+file)
              console.log(textStatus)
              console.log(errorThrown)                           
          }
      });
   }

   //加载成功后的处理
   function loadok(file) {
      //计算加载进度
      //这里加1,因为输出js文件到页面,也需要时间,加1就是把输出js的时间计为一个文件
      //这样所有文件加载完成后是 99% ,输出到页面完成后,才是 100%     
      var percent = oknum  / (files.length + 1) ; 
      if(typeof(funPercent)=="function") funPercent(percent, file);

      //加载完成后,按传的顺序输出js到页面
      if (oknum == files.length) {
      for (var i = 0; i < files.length; i++) {
        var script = document.createElement('script');
        script.innerHTML = fileData[files[i]];
        document.getElementsByTagName('HEAD').item(0).appendChild(script);			
      }
      if(typeof(funPercent)=="function") funPercent(1, "all"); //输出完成即认为加载完成
         if(typeof(funOk)=="function") funOk();	//回调完成事件
      }     
   }
}

使用示例:  

var files = [
  'laz_word/controllers/word_set_ctrl.js?ver=31',
  'laz_word/controllers/word_set_ctrl.js?ver=31',
];
ajaxLoadJs(files,function(){
    console.log("====over======");     
},function(percent,file){	 
  console.log(percent,file);
});
来源:jsfun.cn
http://www.jsfun.cn/#ajaxLoadJs





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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值