JavaScript异步加载

异步加载：按需要加载，用到的时候再加载，不用到不加载。
异步加载的三种方案：

1. defer 异步加载，但要等到dom文档全部解析完才会被执行。只有IE能用。（IE9以下）

2. async 异步加载，加载完就执行，async只能加载外部脚本，不能把js写在script 标签里。 （不兼容IE9以下）

3. 创建script，插入到DOM中，加载完毕后callBack
   方式一：

    function loadScript(url, callback){
   

   var script = document.createElement(‘script’);
   script.type = “text/javascript”;
   //先绑定监听
   if(script.readyState) { //兼容IE
   script.onreadystatechange = function () {
   if(script.readyState == ‘complete’ || script.readyState == ‘loaded’) {
   toolscallback; //执行callback函数，要求工具函数以都包在“tools”对象中
   }
   }
   } else {
   script.onload = function () {
   //chrome firefox safari oprea
   toolscallback;
   }
   }
   script.src = url; //当执行到这一行代码时就开始下载srcipt脚本了
   document.head.appendChild(script); //当执行到这里时代码被写入到文档中，如果下载好了就开始执行
   }
   //检测：
   // 调用方式： 调用loadScript（）方法，函数名通过字符串形式传入

loadScript(‘LU.tools.js’, ‘test’)
// 被加载的script文件命名为“LU.tools.js”, 加载完被执行的函数为 test()

var tools = {
test: function () {
alert(‘我加载完成并执行了。’)
},
demo: function(){
//…
}
}
测试结果：

方式二：

	function loadScript(url, callback){
var script = document.createElement('script');
script.type = "text/javascript";
//先绑定监听
if(script.readyState) {	//兼容IE
	script.onreadystatechange = function () {
		if(script.readyState == 'complete' || script.readyState == 'loaded') {
			callback && callback();     //在这里执行callback
		}
	}
} else {
	script.onload = function () {
		//chrome firefox safari oprea
		callback && callback();         //在这里执行callback
	}
}
script.src = url;	//当执行到这一行代码时就开始下载srcipt脚本了
document.head.appendChild(script);	//当执行到这里时代码被写入到文档中，如果下载好了就开始执行

}
// 调用方式需要注意一下，通过一个匿名函数来包装还未到达的test()方法。

loadScript(‘LU.tools.js’, function(){
test();
})
// tools.js 只需要直接写方法就好

function test () {
alert(‘我加载完成并执行了。’)
}

测试结果：

方式三：创建一个script标签，插入到DOM中，加载完毕后callback 兼容性最好的 -->