异步脚本加载 JS Loader

JS会阻塞其它页面资源的下载，通过对JS的异步加载可以解决这个问题，加快页面内容的呈现速度。获得更好的体验。

使用script标签加载

通过firebug查看各种资源加载状态，当test.js下载完毕后，图片才开始下载。

猛击测试页面block.html

使用JSLoader异步加载JS

当使用异步加载方式加载JS时，test.js与图片同时加载，加快了页面的呈现：

猛击测试页面js-loader

JSLoader

JSLoader.load(url, [fun1], [funN]);
参数：
url 要加载的JS的地址
fun 依赖该JS执行的函数

使用示例：

JSLoader.load('test.js', function(){
    document.getElementById('test').innerHTML = test;
});

猛击这里下载JSLoader.js

JSLoader源码：

var JSLoader = function(){

	var scripts = {};

	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);
					}
				}
			}
		}
	};
}();