JavaScript异步加载

javascript 异步加载的三种方案

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

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

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

异步加载JS并执行兼容性写法：

方式一  

需要被加载的工具函数中所有的方法都是写在一个交 “tools”的对象中。

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') {
				tools[callback]();	//执行callback函数，要求工具函数以都包在“tools”对象中
			}
		}
	} else {
		script.onload = function () {
			//chrome firefox safari oprea
			tools[callback]();
		}
	}
	script.src = url;	//当执行到这一行代码时就开始下载srcipt脚本了
	document.head.appendChild(script);	//当执行到这里时代码被写入到文档中，如果下载好了就开始执行
}

测试：

调用方式： 调用loadScript（）方法，函数名通过字符串形式传入

loadScript('tools.js', 'test')

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

var tools = {
	test: function () {
		alert('我加载完成并执行了。')
	},
	demo: function(){
		//...
	}
}

测试结果： 正确加载并执行

方式二

被加载的异步JavaScript代码不需要被一个变量封装起来，但调用方式有变化

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('tools.js', function(){
	test();
})

tools.js 只需要直接写方法就好

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

测试结果： 正确加载并执行