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

  

  


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM