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
