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