JS/CSS module LazyLoad 之一

隨著web app中JS越來越多，有時頁面首次載入時有很多JS並沒有用到。這時為了提高下載速度，提高頁面渲染效率就需要讓這部分暫時不用的JS消極式載入，即只在用到它們的時候再下載。這裡會先實現一個最簡單JS的惰性載入。後續幾篇會逐步加強功能直至一個完整的JS/CSS模組載入庫。這個系列裡我不會實現隊列，即各個JS檔案是並行下載的，只有當多個JS全部下載後才執行回調。當然在第二個系列JS Queue LazyLoad中會實現各個JS檔案順序載入，每個JS檔案下載後都有一次回調機會。這兩種方式有各自的應用情境。

先給出使用介面

LazyLoad.js(urls  // js檔案路徑fn    // 全部載入後回呼函數scope // 指定回呼函數執行內容);

樣本

LazyLoad.js(['a.js','b.js','c.js'], function(){alert('載入完畢');});

Firebug中效果如下，a,b,c三個檔案幾乎是同一時間開始下載的。

這個系統會盡全力去載入所有的JS檔案，即當某個檔案不存在或載入失敗它不會就此中斷，仍然會去載入其它的JS檔案。直到所有的模組都載入了一次才去回調。

完整代碼

LazyLoad = function(win){var list,isIE = /*@cc_on!@*/!1,doc = win.document,head = doc.getElementsByTagName('head')[0];function createEl(type, attrs){var el = doc.createElement(type),attr;for(attr in attrs){el.setAttribute(attr, attrs[attr]);}return el;}function finish(obj){list.shift();if(!list.length){obj.fn.call(obj.scope);}}function js(urls, fn, scope){list = [].concat(urls);var obj = {scope:scope||win, fn:fn};for(var i=0,len=urls.length; i<len; i++){var script = createEl('script', {src: urls[i]});if(isIE){script.onreadystatechange = function(){var readyState = this.readyState;if (readyState == 'loaded' || readyState == 'complete'){this.onreadystatechange = null;finish(obj);}}}else{script.onload = script.onerror = function(){finish(obj);}}head.appendChild(script);}}return {js:js};}(this);

example下載