实现页面异步加载
Posted lizhixuan
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了实现页面异步加载相关的知识,希望对你有一定的参考价值。
应用场景
平时我们用的最多的网页加载方式就是同步加载模式,也称阻塞模式,这种模式虽然安全,但是对于设计比较繁琐的网页采用同步加载会使网页的加载时间大大加长,所以也就出现了下面用到的异步加载模式。
使用
异步加载可以使用 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()
原理实现
主要原理就是首次加载只加载所需脚本文件,首次切换其他页面时,动态加载所需脚本,并标识已加载防止重复加载,异步回调方法可以在脚本加载完成时执行相关操作。
GitHub 源文件
https://github.com/lizhixuan1/JavaScript/tree/Async-Load
需要的朋友可以参考,如有不足,欢迎交流评论
以上是关于实现页面异步加载的主要内容,如果未能解决你的问题,请参考以下文章