jQuery 页面载入进度条
页面 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>
用于载入完毕后隐藏进度条。
按钮，或自行输入 
沙发？！
@Lorz: 看来，Friendfeed 比 Twitterfeed 快100倍。
嗯? 等待新皮里再折腾...旧皮不搞了...话说这loading的确是有这个必要滴..
呃，我就是看了Twitter才慢了。
不錯，增加寬度的進度條更炫了，flash般的效果。
@Leeiio: 呵呵，好看是一方面，最好的是这么放确实能够精确展示载入进度，除了有点点麻烦外。
达人啊达人，太炫了，膜拜
大家这么快。。刚刚还在改GR的脚本来着，发现更新就奔过来了。。
这个好像在awflasher那里看到了效果，没有细想是怎么实现的。。
没想到是animate，我最近也才用上了这个家伙 呵呵~
@Zoll: awflasher 那里没有用 animate，是更直观的 .css
太实用了,对于像我那个图多的站更应该加个这小东西,哈哈...
看着好像不是很麻烦...
@Geedr.com: 什么时候回家？
@iColor: 其实不麻烦，就是在 index.php single.php sidebar.php footer.php 的适当位置加几个变换宽度的 js，你有耐心的话还可以让宽度变化更丰富一些，这样进度更精准。
@Zoll: 呵呵，Animate 是所有 effects 的基础，只是因为有很多现成的，反而被大家忽略了。
@Shawn: 貌似也的确不是jQuery效果，没有那么流畅。。CSS也能完成的话，那应该也麻烦很多吧。。一知半解，呵呵。。
我的新Theme在js方面还是一片空白呢，正好可以用上
@Zoll:举例就明白了。$("#loading div").css("width","16px")，是 jQuery 的 css 工具。
很好，以后加~
你今天过得还算低调，居然不尊重我的劳动成果。
@leehow: 我一定要低调。。。我不喜欢 B。。。
@Shawn: 了解，再过两个星期高调。
@Shawn: 哈哈 原来是这样~ 还是jQuery 殊途同归呀 呵呵~
@Zoll: 是的，不过出于增强视觉效果的目的，animate 的应用就可以在这里体现了。
赞！这样文章的风格。简单明了，一般名师才能做到，哈哈
loading框的所有设计尺寸的样式最好都用JS加入，否则如果浏览器禁用了JS或者因为其他原因没能加载完最后的隐藏代码，那就穿帮了。
比如你上边这个例子，禁用js后，默认会显示个100 x 20的#A0DB0E色框框。
真好，回家可以好好学习JQUERY。
设计--》涉及
我是传说中的白字先生
@dimlau: 好的，demo 已经改了。我真怕谁禁用 JS。。。看来我得向 CSS 派进发。
@sofish: 我迷惑了，你到底在哪儿呢？深圳？家里？
示意图画的不错
最早看到这个创意和实现方法貌似是在 aw 那儿
@北极冰仔: 是的，aw 说过一个最简单的 loading 条方法。不过 jQuery 的 custom animate effects 可以让效果更加好看.根本还是一个顺序问题。如果日后浏览器都学"聪明"，把 js 统统延后载入，所有基于 js 的方法都行不通了。
看来我也该好好下心思学学 JQuery 的应用了，呵呵！
等我放假了估计又要每天到你这里自习了。。
这个效果真好看。
唔～很棒很棒～这个效果很好看～可惜是js的～有点不情愿用～哈哈～回头还是要仔细玩玩滴～
@Shawn: 肖大, 能看看我网站是你说的效果么? 我什么都不懂,, 也不知道对不对~
@啦啦啦: 哈哈，基本对了，就是我忘了说一处，导致 loading 被遮住了。
css
#loading 里面加一个 z-index:100;
@Shawn: loding貌似还是不见... 是加这里"#loading {z-index:100;"还是"#loading div {z-index:100;"这里?
不过顺便把Lavalamp依葫芦给加上了...
@啦啦啦: 应该是缓存的问题，因为我这里都已经看到了。你清空一下浏览器缓存。
本来aw的效果一直想加但是懒……看到shawn的效果立刻换上，哇咔咔
@Shawn: 肖大大,, 有什么办法能像你blog里的loading条一样好看捏?
你太“邪恶”了
很强大，回头也学着来折腾下看看
很不错的创意！！收藏了！！
IE除了body可以支持position:fixed;之外,而且的都属性器都不支持position:fixed;
上面的"IE"是IE6,打少个6
就这么就过完了？？？真深奥
@Sivan: 看到了，很好看，和主题结合的也好。
@啦啦啦: 其实，我这个进度条，还真没今天说的这个进度条高级。我的只是一个背景不停滚动的东西，随便找个图片就好了。你可以看看楼上 Sivan 同学放入自己主题后的样子，很好看！
@MY-Hou: 我怎么邪恶了？
@胡戈戈: 对比 position:fixed，我更推荐 position:absolute，或者给 ie6 一个 absolute hack。
@任: 是啊，总算完了。哈哈
在新主题里面折腾折腾。喜欢好久了
@Shawn: 嗯, 那个漂亮的说.. 看来是颜色也是要搭配好的...
@啦啦啦: 哈哈，当然，我是随便配的色，你可以自己任意搭配的。
@Shawn:
经常诱惑人做各种“不正当”折腾...“邪恶”
@Shawn: 大概春节的时候才能回家了，
学习下~~
又有东西学习了...GR订阅咯.ho~~
不错，支持下
看见你把外链基本上都改成了自己域名下的链接然后JS出去。。
总是想如果一个不支持，或者关掉了JS功能的浏览器来到这个地方，
估计很多链接都会404吧^^
@Zoll: 我一直认为，不支持 JS 的浏览器就是半残废。比 IE 恶劣到哪儿去了。很多站点的 Cookies 都依靠 JS，关闭 JS 的浏览器连正常功能可能都使用不到。
@Shawn: 其实也不只是浏览器的原因。我就碰到过这种情况。。
有时候碰到网络状态不是很好，你的JS很难一下就载完，老看见滚动条在那闪啊闪，然后这些链接就都打不开了。。
@Zoll: 好的，有时间我细化一下 JS，分类载入。
@Zoll: 弄好了，呵呵，谢谢提醒。
@Shawn: 呵呵 貌似快了很多啊~ 强！
强悍的效果。。
这个得好好学学。美观又实用！
昨天晚上加入了这个功能，谢谢分享。。
侧栏链接效果也是相当不错啊！很华丽！
没有感觉到快 效果很棒
每次来这都要爬楼啊，呵呵。我的博客本来速度就慢，还是考虑一下再说！
疯鸟！
每次Shawn童鞋都是在说JQ的东西,恰好这玩意儿我一点都不懂
放假了一定要学会,然后把你的文章都放来看
哼哼!
那个。。加百分比进度的能做么？ 1%..10%..50%..100%
@neekey: 当然可以了，更新了演示，其中 setTimeout 在实际应用中是不需要的，你看一下就明白了。
封顶咯~~
看来培训司变designer了
博主的博客效果很炫。评论应该设置分页了，太长了。
@life97: 评论我一直认为没有必要分页，会增大访客的使用难度，如果速度不受影响，评论不分页反而更直观。
不算，学习了。为什么你的侧边栏在FF下看会虚呢～
@何必呢: 应该是我设置了透明的关系吧。
很不错，受益不少啊。
怎样引入 jQuery 框架啊
@Yuri: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
这句放在头部就可以了。
@Shawn: 谢谢啊,已经搞好了的说,很有用.希望你以后分享更多技巧
呵呵，浏览器都自带进度条的，有点越俎代庖。。。
ajax载入内容，进度条还有点用。其实我也不喜欢ajax。简单自然最好。
炫，就一个字···
有Anime应该更好玩一点，哈哈。人肉代码Copy机启动。
非常不错,谢谢 又学会一样
hi,
请教一个问题，我的“fadeOut()；”放到footer.php中最后的的前边，按理说每次进度条完成后也应该载入完成，可是每次进度条很快，完成后页面还要一点时间，是何等原因？
学习了～～～
果然很厉害！佩服，一定要学好jquery.
好东西啊！收藏了！！
不错的主意，是不是所有的主题都可以这样加呢？
不错，想法很好，不过我感觉这个进度条 有种很卡的感觉，用户体验上不是很好哇。
好方法，我试试