JavaScript教程：网页加载进度显示功能

首先要给网页加上进度条的代码。如 aw 所言，进度条的位置很重要。如果你的 部分要加载的东西太多，导致网页迟迟显示不出来，那进度条也没必要加了。用户可能等不及进度条显示出来就关闭页面了。针对这个问题，我作了手动的优化，让自己的页面在 部分只加载 CSS和 favicon，至于 javascript 统统挪到后面。这样打开网页的时候就能迅速地显示出进度条，起到提示的作用。

HTML 代码我加在 的后面了，内容如下，这个“载入中”的提示也可以用 Javascript 输出（有利于SEO）

progressbar 用来包含内部的三个 span，并进行统一的定位。内部的三个 span 各司其职，progressdone 用来显示已完成的进度，progressing 用来显示进度条的底色，progresstip 则是载入中的文字提示。

接下来是三者的 CSS 样式，决定了这个进度条显示出来会是什么样子。

#progressbar{
top:0;
left:0;
position:fixed; /* 固定在浏览器窗口的左上角 */
border:none;
z-index:4;
}
#progressbar span{
position:absolute; /* 绝对定位 */
height:1.5em;
opacity:0.6;
}
#progressdone{
background:#888; /* 底色 */
width:100px; /* 进度条宽度 */
z-index:5;
}
#progressing{
background:#454545;  /* 进度的颜色 */
width:6px;  /* 初始宽度 6 */
z-index:5;
}
#progresstip{
font-size:12px;
font-weight:lighter;
text-align:center;
vertical-align:middle;
z-index:7;
width:100px;
color:#FFF;
}

接下来是用 Javascript 来动态地控制进度的显示。由于 js 中并没有一种完善的方法可以判断浏览器加载的情况，所以只好用土办法直接上了。

土办法就是在页面的不同位置加上不同的进度值。比如我的页面在文章显示完后显示为 50%，在评论加载完成后显示为 75%，最后的 25% 留给页面的侧边栏和底部。查看我的页面源代码就可以看到jQuery 控制的进度值：

没有 jQuery 库也可以直接用 javascript 来搞定

这样就实现了对进度的控制，在页面的不同地方放上不同的加载值，这要改一下主题的源文件。

最后在 前插入一段 js 代码来终止这个进度条的使命：

没有 jQuery 的版本要麻烦一点：