无刷新加载页面,提高加载速度,提升用户体验,可实现加载完毕页面入场动画。不用说,要实现无刷新加载肯定是要用到Ajax。原理是只加载一次index(主页),这个主页我们可以理解成一个容器,需要加载新页面时,不必跳转,而是把新页面代码全部读取出来,然后把主页的旧代码清空,最后写入最新的代码即可。
我们把加载页面的函数写在主页里,就算主页的代码被清空了,也不会丢失这个函数,因为已经被浏览器加载到内存中了,所以函数是不会轻易丢失的。
//加载页面
function loadPage(page, self) {
createMask();
window.func = null;
$.ajax({
type: 'get',
url: page,
success: function(data) {
if (self) {
window.prevPages.push(self); //入栈
}
document.open();
document.write(data);
document.close();
isFinished = true;
animation();
if (window.func == "undefined") {
alert("死了");
} else {
window.func();
}
},
error: function() {
alert("目测是加载失败了~");
}
});
}
page是需要加载页面的URI,self则是当前网页本身的文件,因为我要实现返回,所以需要把这个名字压入栈中,当点击返回链接时就是一个出栈的过程,而加载则是入栈的过程,先进后出,正好是我们的需求。
//返回
function retreat() {
createMask();
window.func = null;
var url = window.prevPages.pop(); //出栈
$.ajax({
type: 'get',
url: url,
success: function(data) {
document.open();
document.write(data);
document.close();
isFinished = true;
animation();
window.func();
},
error: function() {
alert("目测是加载失败了~");
}
});
}