我刚开始也在找这个问题的答案，现在解决了，为后面学习的人栽棵树吧。
创新互联是一家朝气蓬勃的网站建设公司。公司专注于为企业提供信息化建设解决方案。从事网站开发，网站制作，网站设计，网站模板，微信公众号开发，软件开发，微信平台小程序开发，10多年建站对成都宣传片制作等多个方面，拥有丰富的网站运维经验。
实现这个功能有很多种方法，这里我选一种个人认为比较简单的方法：
建立三个网页，一个作为主页面，另外两个子页面作为切换页面嵌入主页面，子页面也可以用文字替代。
用jQuery方法来切换页面，语言比较简单网上搜一下看看就懂了
下面附上代码
!DOCTYPE html
html
head
meta charset="UTF-8"
title标题/title
!--jQuery 百度CDN库--
script src=""/script
script
// jQuery代码
$(document).ready(function () {
$("#b1").click(function () {
$("#tab_1").show();// 显示
$("#tab_2").hide();// 隐藏
});
$("#b2").click(function () {
$("#tab_1").hide();
$("#tab_2").show();
});
});
/script
/head
body
div
h1标题一/h1
/div
div
div
ul
libutton id="b1"菜单1/button/li
libutton id="b2"菜单2/button/li
/ul
/div
div
div id="tab_1"
子页面1
/div
div id="tab_2" style="display: none"
子页面2
/div
/div
/div
/body
/html
方法：1、直接贴图：在界面上贴一个gif动态等待效果图片，gif图片获取方式：网上找素材，会ps的可以自己制作img src="wait.gif" /
2、CSS3/SVG/HTML5 Canvas手动绘制等待效果：
这种效果：网上有很多类似素材，可以根据需要选择，或使用上述技术绘制
下面提供一个CSS3绘制的范例
3、CSS的代码如下：
style
.loading {
width:0;
height:0;
border-right:20px solid #fff;
border-top:20px solid #000;
border-left:20px solid #fff;
border-bottom:20px solid #000;
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
}
.loading {
animation: bganim 0.6s linear 0s infinite;
-moz-animation: bganim 0.6s linear 0s infinite;
-webkit-animation: bganim 0.6s linear 0s infinite;
}
@keyframes bganim {
from { transform:rotate(0deg); } to { transform:rotate(360deg); }
}
@-moz-keyframes bganim {
from { -moz-transform:rotate(0deg); } to { -moz-transform:rotate(360deg); }
}
@-webkit-keyframes bganim {
from { -webkit-transform:rotate(0deg); } to { -webkit-transform:rotate(360deg); }
}
/style
4、labelCSS3效果/label，div class="loading"/div
效果如下图：运行机制很简单，先手动绘制一个静态的图，然后控制对应div进行360度旋转，即可实现
5、使用js等待效果插件(如：spin.js)
6、JS代码如下：
var opts = {
lines: 9,
length: 0,
width: 15,
radius: 20,
corners: 1,
rotate: 0,
direction: 1,
color: '#0101DF',
speed: 1,
trail: 34,
shadow: false,
hwaccel: false,
className: 'spinner',
zIndex: 2e9,
top: '50%',
left: '50%'
};
var target = document.getElementById('img_wait');
var spinner = new Spinner(opts).spin(target);
7、html代码的引用：div id="img_wait"/div
8、打开测试，效果如下
!-- 页面，可以使用绝对或者相对路径 --
link rel="prefetch" href="page2.html" /
!-- 图片，也可以是其他类型的文件 --
link rel="prefetch" href="sprite.png" /
从上面的HTML代码可以看出，预加载使用 link 标签，并指定 rel="prefetch" 属性，而href属性就是需要预加载的文件路径。而Mozilla还实现了一些类似的 link rel 属性:
link rel="prefetch alternate stylesheet" title="Designed for Mozilla" href="mozspecific.css" /
link rel="next" href="2.html" /
备注： https 协议也同样支持。
何时需要预加载
网站是否采用预加载取决于你的需求，下面是一些建议：
- 如果一系列的页面幻灯片一样展示，那么可以预加载前后各1至3个页面.
- 加载网站内部通用的图片
- 在搜索结果页预加载下一页
阻止预加载
Firefox 允许禁止预加载模式，代码如下：
user_pref("network.prefetch-next", false);