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

Posted 2020-11-01 忧郁鸟

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