異步加載js文件并執行js方法：實現異步處理網頁的復雜效果? ? ?
? ? 有這么一個場景，當你的網頁頁面效果過多就會造成了打開頁面的速度變得緩慢，長時間處于加載的狀態，這樣的效果通常會讓用戶感到不友好，通常的處理方法是先加載基本的html，然后再加載其他的網頁效果，讓用戶感覺到頁面一下子就出來了，然后其他的網頁效果再慢慢的展現出來。? ? ?這里通過JSLoader組件來實現這種前端的效果
? ? var JSLoader = function(){? ? ? ? ?
? ? ? ? var scripts = {}; // scripts['a.js'] = {loaded:false,funs:[]}? ? ? ? ?
? ? ? ? function getScript(url){? ? ? ? ?
? ? ? ? ? ? var script = scripts[url];? ? ? ? ?
? ? ? ? ? ? if (!script){? ? ? ? ? ? ?
? ? ? ? ? ? ? ? script = {loaded:false, funs:[]};? ? ? ? ? ? ?
? ? ? ? ? ? ? ? scripts[url] = script;? ? ? ? ? ? ?
? ? ? ? ? ? ? ? add(script, url);? ? ? ? ?
? ? ? ? ? ? }? ? ? ? ?
?
? ? ? ? ? ? return script;? ? ?
? ? ? ? }? ? ? ? ? ? ? ? ? ? ? ? ? ?
?
? ? ? ? function run(script){? ? ? ? ?
? ? ? ? ? ? var funs = script.funs,? ? ? ? ? ? ?
? ? ? ? ? ? len = funs.length,? ? ? ? ? ? ?
? ? ? ? ? ? i = 0;? ? ? ? ? ? ? ? ?
? ? ? ? ? ? for (; i<len; i++){? ? ? ? ? ? ?
? ? ? ? ? ? ? ? var fun = funs.pop();? ? ? ? ? ? ?
? ? ? ? ? ? ? ? fun();? ? ? ? ?
? ? ? ? ? ? }? ? ?
? ? ? ? }? ? ? ? ?
?
? ? ? ? function add(script, url){
? ? ? ? ? ? var scriptdom = document.createElement('script');? ? ? ? ?
? ? ? ? ? ? scriptdom.type = 'text/javascript';? ? ? ? ?
? ? ? ? ? ? scriptdom.loaded = false;? ? ? ? ?
? ? ? ? ? ? scriptdom.src = url;? ? ? ? ? ? ? ? ?
? ? ? ? ? ? scriptdom.onload = function(){? ? ? ? ? ? ?
? ? ? ? ? ? ? ? scriptdom.loaded = true;? ? ? ? ? ? ?
? ? ? ? ? ? ? ? run(script);? ? ? ? ? ? ?
? ? ? ? ? ? ? ? scriptdom.onload = scriptdom.onreadystatechange = null;? ? ? ? ?
? ? ? ? ? ? };? ? ? ? ?
?
?
? ? ? ? ? ? //for ie? ? ? ?
? ? ? ? ? ? scriptdom.onreadystatechange = function(){
? ? ? ? ? ? ? ? if ((scriptdom.readyState === 'loaded' || scriptdom.readyState === 'complete') && !scriptdom.loaded){? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ? run(script);? ? ? ? ? ? ? ? ?'
? ? ? ? ? ? ? ? ? ? scriptdom.onload = scriptdom.onreadystatechange = null;? ? ? ? ? ? ?
? ? ? ? ? ? ? ? }? ? ? ? ?
? ? ? ? ? ? };? ? ? ? ? ? ? ? ?
?
? ? ? ? ? ? document.getElementsByTagName('head')[0].appendChild(scriptdom);? ? ?
? ? ? ? }? ? ? ? ?
? ? ? ? return {? ? ? ? ?
? ? ? ? ? ? load: function(url){
? ? ? ? ? ? ? ? var arg = arguments,? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? len = arg.length,? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? i = 1,? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? script = getScript(url),? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? loaded = script.loaded;? ? ? ? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? for (; i<len; i++){? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ? var fun = arg[i];? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ? if (typeof fun === 'function'){? ? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ? ? ? if (loaded) {? ? ? ? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ? ? ? ? ? fun();? ? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ? ? ? }else{? ? ? ? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ? ? ? ? ? script.funs.push(fun);
? ? ? ? ? ? ? ? ? ? ? ? }? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ? }? ? ? ? ? ? ?
? ? ? ? ? ? ? ? }? ? ? ?
? ? ? ? ? ? }? ? ?
? ? ? ? };
? ? }();
?
? ? 調用方法示例： 先在頁面上加載JSLoader.js文件
? ? 然后執行? JSLoader.load('js/test.js' , function () {a();})
? ? 表示異步加載test.js文件，并且加載完成后再執行a()方法，a()方法是test.js里面的方法，a()方法就是負責渲染一些前端頁面的網頁效果來的。 不過該方法在ie7下并不會產生異步的效果，在ie7下需要使用延時觸發器來包裝一下，如：
? ? setTimeout(" JSLoader.load('js/test.js' , function () {a();})", 1);
