脚本动态加载
类别: HTML/JS
标签: JavaScript
10
四月
2010
往往在大型RIA运用当中,如果要用户等待全部的脚本加载以后再进行正常的浏览,这绝对是很差的用户体验,像YUI,Dojo这样庞大的类库他们怎么处理的呢,他么首先加载最基本的,然后再更具按需求加载相应的模块,在页面点开时候js文件最多能并行下载2个,如果采用脚本动态加载技术这样会极大了节约了页面打开时数据流量.
如果采用HttpRequest方法来动态加载当然OK,但是这样会阻塞页面中图片的下载,会出现什么情况呢?
页面在JS下载的几秒中一片空白,没有内容的显示,如果JS文件数据量很小,这个变化几乎可以不不见,那么如果很大就会严重的影响用户体验。
那么我们采用插入script标签的方法,并控制串行顺序的下载,代码如下:
var loader ={}; loader.js = function(url,callback){ var element = document.createElement("script"); element.src = url; element.type = 'text/javascript'; element.language = 'javascript'; document.getElementsByTagName('head')[0].appendChild(element); if(window.ActiveXObject) { element.onreadystatechange = function() { var self = this; var state = self.readyState; if (state == "loaded" || state == "interactive" || state == "complete") { this.onreadystatechange = null; if(callback)callback(); } } } else { element.onload = function() { element.onload = null; if(callback)callback(); }; } };
这样通过callback实现js串行的加载,比如下载3个文件
loader.js('a.js',function(){ loader.js('b.js',function(){ loader.js('c.js') }) })
这样确实有一个很大的缺陷,如果需要一次串行加载很多文家,代码很臃肿
loader.ls = function(){ var str=str1=funcstr=''; for(var i =0;i<arguments.length;i++) { if(typeof arguments[i]=='string') { str+="loader.js('"+arguments[i]+"',function(){"; str1+="})"; } else if(typeof arguments[i]=='function') funcstr = arguments[i].toString().replace(/\n|\t|\r/gm,"").match(/^function[\s\w]*\(\)\{(.*)}$/)[1]; } str=str+funcstr+str1; eval(str) };
现在如果需要多个js文件的串行加载,直接使用
loader.ls('1.js','2.js',…,'n.js',callback);
那么当然对于CSS同样可以响应的加载,我就不写了