网页加载进度显示功能

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

HTML 代码我加在 <body> 的后面了,内容如下,这个“载入中”的提示也可以用 Javascript 输出(有利于SEO)

<div id=”progressbar”>
<span id=”progressdone”></span>
<span id=”progressing”></span>
<span id=”progresstip”>载入中&hellip;</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!

转载http://blog.xiaoding.org/post/a-copycat-loading-progress-bar.html

1 Comments
  1. 和dedecms下的文章点击量优化原理一样,dede的点击数调用严重拖慢网页的加载速度,往往加载一半卡一会才能显示完整,也是通过先定义JS ID,然后调用ID,把代码放到屁股后面去,这样就会快很多,用户体验好了很多。

Leave a Reply

Time limit is exhausted. Please reload the CAPTCHA.