因为网页模板里用的CSS文件或者JS文件（尤其是JQUERY）很可能不是本地文件。如果这个文件地址的服务器有障碍，那文件半天加载不上，页面也就无法打开，即便打开也是混乱的。
网站建设哪家好，找创新互联公司！专注于网页设计、网站建设、微信开发、小程序定制开发、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了绥芬河免费建站欢迎大家使用！
我刚开始也在找这个问题的答案，现在解决了，为后面学习的人栽棵树吧。
实现这个功能有很多种方法，这里我选一种个人认为比较简单的方法：
建立三个网页，一个作为主页面，另外两个子页面作为切换页面嵌入主页面，子页面也可以用文字替代。
用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、在body中用onload:
body onload="myfunction()"
2、在脚本中用window.onload:
script type="text/javascript"function myfun(){alert("this window.onload");}/*用window.onload调用myfun()*/window.onload=myfun;//不要括号/script
下面这个例子在页面完成加载之后改变id_1的背景颜色。
script language="javascript" function myfun() {document.getElementById("id_1").style.background= "#000"; // 改变背景颜色}// 用js实现在加载完成一个页面后自动执行一个方法/*用window.onload调用myfun()*/window.onload=myfun;//不要括号/script
看你是要滚动到哪才从服务器加载进来，还是加载好了，只是想要个飞入的动画，如果只要飞入的动画效果，直接可以先给他定位，在监听scroll事件、判断scrollTop，
方法：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);
