|
首先要给网页加上进度条的代码。如 aw 所言，进度条的位置很重要。如果你的 <head> 部分要加载的东西太多，导致网页迟迟显示不出来，那进度条也没必要加了。用户可能等不及进度条显示出来就关闭页面了。针对这个问题，我作了手动的优化，让自己的页面在 <head> 部分只加载 CSS 和 favicon，至于 javascript 统统挪到后面。这样打开网页的时候就能迅速地显示出进度条，起到提示的作用。
HTML 代码我加在 <body> 的后面了，内容如下，这个“载入中”的提示也可以用 Javascript 输出（有利于SEO）
<div id=”progressbar”>
<span id=”progressdone”></span>
<span id=”progressing”></span>
<span id=”progresstip”>载入中…</span>
</div>
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 控制的进度值：
<script type=”text/javascript”>$(‘#progressing’).width(25);</script>
没有 jQuery 库也可以直接用 javascript 来搞定
<script type=”text/javascript”>
// <![CDATA[
document.write('<style type="text/css">#progressing{width:25px;}</style>');
// ]]>
</script>
这样就实现了对进度的控制，在页面的不同地方放上不同的加载值，这要改一下主题的源文件。
最后在 <body> 前插入一段 js 代码来终止这个进度条的使命：
<script type=”text/javascript”>
$(‘#progressing’).width(97);
$(document).ready(function(){ // document 加载完的时候
$(‘#progressing’).width(100); // 宽度调整为 100px
$(‘#progresstip’).html(’100%’); // 进度字符显示 100%
// 停顿 0.5 秒后，将进度条隐藏
setTimeout(function(){$(‘#progressbar’).hide();}, 500);
});
</script>
没有 jQuery 的版本要麻烦一点：
<script type=”text/javascript”>
//<![CDATA[
document.write('<style type="text/css">#progressing{width:97px;}</style>');
function hideProgressBar(){
document.write('<style type="text/css">#progressbar{display:none;}</style>');
}
function finishMyProgress(){
document.write('<style type="text/css">#progressing{width:100px;}</style>');
document.getElementById('progresstip').innerHTML = '100%';
setTimeout(hideProgressBar, 500);
}
document.body.onload = finishMyProgress;
//]]>
</script>
折腾完毕，Enjoy!
(责任编辑：admin) |
