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