页面 Loading 条基本人人都会用。它的原理很简单：在页头放置一个文字或者图片的 loading 状态，然后页尾载入一段 JS 隐藏掉，即根据浏览器的载入顺序来实现的简易 Loading 状态条。
上图展示了传统 Wordpress 模板在浏览器中的载入顺序，Loading 条的出现和消失分布于头尾。
如果我们在页面的不同位置放置多个 JS ，每个 JS 用于逐步增加 Loading 条的宽度，那么这个 Loading 条无疑会更具实用价值。它在一定程度上缓解了访客等待载入的枯燥感，同时还能客观反映页面载入的进度。若再配以 jQuery 内建的动画效果，其完全可以与浏览器自带的状态条媲美。
先来看一个演示：地址。
要得到演示上的进度条效果，首先，引入 jQuery 框架(一定要放在页头
<head> 标签内)。然后在 <body> 标签起始位置放置：
<div id="loading"><div></div></div>
CSS 可以这么写：
#loading {
width:100px;
height:20px;
background:#A0DB0E;
padding:5px;
position:fixed;
left:0;
top:0;
}
#loading div {
width:1px;
height:20px;
background:#F1FF4D;
}
准备工作到这里就做好了。
接着，请随意发挥，依照你对图二的理解，在模板各个部分的适当位置放置：
<script type="text/javascript">
$("#loading div").animate({width:"16px"})
</script>
其中红色数值应该随载入顺序逐步增加，直到 footer.php。另外别忘了在 footer.php 最末尾放上：
<script type="text/javascript">
$("#loading").fadeOut()
</script>
用于载入完毕后隐藏进度条。
分享到：
相关推荐
1.10 倒计时载入页面 1.11 定义网页的关键字 1.12 进入页面同时弹出欢迎对话框 1.13 禁止网页另存 1.14 禁止页面加入缓存 1.15 离开页面时弹出对话框 1.16 判断页面是否添加了W3C声明 1.17 屏蔽网页中的脚本 1.18 以...
1.10 倒计时载入页面 1.11 定义网页的关键字 1.12 进入页面同时弹出欢迎对话框 1.13 禁止网页另存 1.14 禁止页面加入缓存 1.15 离开页面时弹出对话框 1.16 判断页面是否添加了W3C声明 1.17 屏蔽网页中的脚本 1.18 以...
4. **百分之载入网页[原创：测试版本].htm**：这可能是关于网页加载进度条的实现，利用JavaScript进行动态效果的展示。 5. **互动文档树样本.htm**：可能是一个展示如何创建交互式文档结构的实例，例如通过...
8.10 页面载入等待... 238 8.11 关闭窗口超链接... 239 8.12 随机产生超链接地址... 240 8.13 制作登录的密码验证功能... 241 8.14 取得页面的超链接数... 242 8.15 取得页面中所有的超链接地址... 243 第9章 ...
- 远程下载加入进度条,下载速度等信息 ####fix bug:（bug解决和程序优化） - 下载前判断当前目录可写 - 文件扩展名处理,分为用户方式和扩展名权限方式 - 上传结束提示：是否成功、失败原因 - 上传扩展名限制 ...