网页加载进度显示功能 2010-10-09 前端设计,转载,wordpress 1 条评论 3118 次阅读 首先要给网页加上进度条的代码。如 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! 转载http://blog.xiaoding.org/post/a-copycat-loading-progress-bar.html 标签: page, load 本作品采用 知识共享署名-相同方式共享 4.0 国际许可协议 进行许可。
和dedecms下的文章点击量优化原理一样，dede的点击数调用严重拖慢网页的加载速度，往往加载一半卡一会才能显示完整，也是通过先定义JS ID，然后调用ID，把代码放到屁股后面去，这样就会快很多，用户体验好了很多。