页面载入进度条

Microhu同学刚刚把这个东西搞上,其实我也很早就在ZWWoOoOo的付费主题中看到过了。不过一直自己的主题没地方放,二是懒得动手,所以一直没有捣鼓过。不久前在Dianso童鞋那里偷了现在顶部那东东,所以也算有个位置放进度条了,好吧,我也加上玩玩。

不过对于代码,Microhu童鞋很忙,还好Timothy同学已经整理出来了,所以我就是用了现成的。它的原理:在页头放置一个 loading 状态,然后页尾载入一段 JS 隐藏掉,即根据浏览器的载入顺序来实现的简易 Loading 状态条。请根据下面步骤来。

首先,确定你的主题已经引入 jQuery 框架(一定要放在页头 <head>标签内),然后在header.php中任意位置插入如下jQuery 代码

其中的10%应该随载入顺序逐步增加,直到 footer.php

之后在<body>标签起始位置放置:

最后在footer.php文件中插入下面的代码:

还有CSS文件,请参考下面代码自行加工:

搞定收工,刷新查看效果吧!

页面载入进度条》上有13条评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注