js异步加载

js异步加载
三个方法：
1.defer 只有ie能用 在script里添加defer属性，可以将该js与html、css并行。
            但要等到dom文档全部解析完才会执行  可以把js代码写到内部
       <script src='xx.js' defer='defer'>

2.async  加载完就执行，async只能加载外部脚本。不能把js写在script标签里
       <script src='xx.js' async='async'>

3.需要时才加载该js
在script中，重新创建script，下载js，再导入页面

 

// 如：在页面用一点按钮来控制加载js
var btn = document.getElementsByTagName('button')[0];
btn.onclick = function(){
	var js1 = document.createElement('script');
		js1.src = 'jquery-3.2.1.min.js';
	document.head.appendChild(js1);
	// 监听是否把js下载完
	js1.onload = function(){
		// 下载完才执行该js中的方法
		alert($('button'));
	}
}


// 将异步js封装成一个方法
function onloadScript(url,callback){
	var js1 = document.createElement('script');
		js1.src = url;
	document.head.appendChild(js1);
	// 监听是否把js下载完
	js1.onload = function(){
		// 下载完才执行该js中的方法
		callback;
	}
}

// 调用方法：
onloadScript('xx.js',function(){ test() });
// 由于在执行这句调用语句时，xx.js中的函数还没有解析。所以会报错undefined。
// 通过function(){}将函数包起来。可以正常解析执行


// 调用方法2：
onloadScript('xx.js','test');
// 函数传字符串的函数名。
// 但js中的方法格式需要时json
// 如：
var tool = {
	test : function(){},
	demo : function(){}
}

function onloadScript(url,callback){
	var js1 = document.createElement('script');
		js1.src = url;
	document.head.appendChild(js1);
	// 监听是否把js下载完
	js1.onload = function(){
		// 下载完才执行该js中的方法
		tool[callback]();//这样调用函数
	}
}