实现页面异步加载

应用场景

平时我们用的最多的网页加载方式就是同步加载模式，也称阻塞模式，这种模式虽然安全，但是对于设计比较繁琐的网页采用同步加载会使网页的加载时间大大加长，所以也就出现了下面用到的异步加载模式。

使用

异步加载可以使用 XHR Injection、 XHR Eval、 Script In Iframe、 Script defer属性、 document.write(script tag)等，我当前采用的的是Script DOM Element方法，也就是动态向页面创建script标签异步加载JS脚本。

代码

• 效果实现

• 代码

var init = {
	menu: $(".menu li"),
	content: $(".content li"),
	js0: true,
	initSwitch: function() {
		var _self = this;
		this.menu.on('click', function() {
			var _index = $(this).index();
			if(!_self['js' + _index]) {
				console.log('script is loading...')
				_self.asyncScript("js/module" + (_index + 1) + ".js", function() {
					console.log('script is loaded.')
					_self['js' + _index] = true
				});
			}
			console.log('switch:'+_index)
			_self.menu.removeClass('mu-act').eq(_index).addClass('mu-act');
			_self.content.removeClass('cont-act').eq(_index).addClass('cont-act');
		})
	},
	asyncScript: function(urls, callback) {
		var script = document.createElement("script");
		script.type = "text/javascript";
		script.async = true;
		script.src = urls;
		if(script.readyState) { //IE
			script.onreadystatechange = function() {
				if(script.readyState == "loaded" || script.readyState == "complete") {
					script.onreadystatechange = null;
					if(callback) callback()
				}
			};
		} else { //Others
			script.onload = function() {
				if(callback) callback()
			}
		}
		document.getElementsByTagName("body")[0].appendChild(script);
	}
}
init.initSwitch()

原理实现

主要原理就是首次加载只加载所需脚本文件，首次切换其他页面时，动态加载所需脚本，并标识已加载防止重复加载，异步回调方法可以在脚本加载完成时执行相关操作。

注意

如果调用的JS内容存在下面两种情况都会报错：

在chrom上面就提示”Failed to execute 'write' on 'Document': It isn't possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened. “

1. js调用 了document.write
2. 或者通过js 自动创建script标签加载内容

GitHub 源文件

https://github.com/lizhixuan1/JavaScript/tree/Async-Load

---

需要的朋友可以参考，如有不足，欢迎交流评论