动态同步加载JS

最新推荐文章于 2024-07-30 10:56:44 发布

x_hwang

最新推荐文章于 2024-07-30 10:56:44 发布

阅读量862

点赞数

文章标签：浏览器 javascript ie chrome firefox

本文链接：https://blog.csdn.net/x_hwang/article/details/25130283

版权

Chrome、Firefox 浏览器动态同步加载JS：

// 动态同步加载js
loadcssorjs = function(filename, filetype) {
	if (filetype == 'css') {
		var fileref = document.createElement("link");
		fileref.rel = 'stylesheet';
		fileref.href = filename;
	} else if (filetype == 'js') {
		var fileref = document.createElement("script");
		fileref.type = 'text/javascript';
		// chrome、firefox同步加载、默认async=true（IE下没用）
		fileref.async = false;
		fileref.src = filename;
	}
	document.getElementsByTagName('head')[0].appendChild(fileref);
}
loadcssorjs('1.css','css');
loadcssorjs('1.js','js');
loadcssorjs('2.js','js');
loadcssorjs('3.js','js');

IE下不兼容、处理方案（适用所有浏览器，使用真正意义上的同步加载）

loadJS = function(filename, fn) {
	var fileref = document.createElement('script');
	fileref.src = filename;
	fn = fn || function(){};
	fileref.onload = function() {
		if (!this.readState || 'loaded' === this.readyState || 'complete' === this.readyState) {
			fn();
			this.onload = null;
		}
	}
	document.getElementsByTagName('head')[0].appendChild(fileref);
}
// 同步加载 1.js -- 2.js -- 3.js -- 4.js -- 5.js -- test()
loadJS('1.js',function(){
	loadJS('2.js',function(){
		loadJS('3.js',function(){
			loadJS('4.js',function(){
				loadJS('5.js',function(){
					// 加载完毕执行最终的回调函数
					test();
				});
			});
		});
	});
})