WordPress网页载入进度条的JS程序开发思路与实际应用

页面载入进度条实现原理：
将要载入的 js 动态的新增到 head 中，并根据每个是否载入完成，统计当前一共载入完成的个数。当每一项都载入完成，载入成功。设定载入失败时间。当超过这个时间提示载入失败。

一、实现逻辑与概念

先我们要知道的是，目前没有任何浏览器可以直接获取正在载入物件的大小。所以我们无法通过资料大小来实现 0-100% 的载入显示过程。

因此我们需要通过 html 代码逐行载入的特性，在整页代码的若干个跳跃行数中设定节点，进行大概的模糊进度反馈来实现进度载入的效果。大致意思是：页面每载入到指定区域，则返回 (n)% 的进度结果，通过设定多个节点，来达到一步一步显示载入进度的目的。

具体是如何设定呢？先我们将网页分成若干区域，就以 frontopen 来说，网站的结构分为 head 区域、 mian 区域（文章主体部分）、 sidebar 侧边栏、 foot 脚部四个部分。考虑做一个范围粗犷一点进度反馈效果。如下图：

将进度反馈设定为四个部分：head 部分返回 30% 进度，main 部分返回 60% 进度，sidebar 部分返回 70% 进度，后 foot 载入完成后返回 100% 。

二、实现方法

1. 先我们需要在 html 页面中，给进度条设定设定一个容器。例如本博的 body 下方会有一个 “

” 的 div 容器，这就是后面我们需要操作并显示的进度条了，当然大家有兴趣的话可以设定更多有个性的进度条。

2. 为 loading 容器设定样式，以本博的进度条为例，样式如下：

.loading{

background:#FF6100; //设定进度条的颜色

height:5px; //设定进度条的高度

position:fixed; //设定进度条跟随萤幕滚动

top:0; //将进度条固定在页面顶部

z-index:99999 //提高进度条的优先层级，避免被其他层遮挡

}

3. 通过 jquery 的 animate 动画效果，来实现进度条的动画载入过程。简单的进行构思，决定使用由左向右的载入效果。终 animate 的执行代码为 “$(‘.loading’).animate({‘width’:’100%’},200);”

4. 思考需要设定几个载入进度节点。上面通过构思，我们已经决定使用 30% 、 60% 、 70% 、 100% 四个进度节点，分别插入到对应的页面位置。并结合上面的 animate 动画代码，终确定四个进度节点的代码为：$(‘.loading’).animate({‘width’:’30%’},50) 、 $(‘.loading’).animate({‘width’:’60%’},50) 、 $(‘.loading’).animate({‘width’:’70%’},50) 、 $(‘.loading’).animate({‘width’:’100%’},50) 。可能大家会问，为什么速度变成了 50 毫秒？因为之前一步载入为 100% 的动画被分成份，所以为了保证动画的连贯性，将其每份切分成为 50 毫秒。

三、插入到页面中的实际应用示例

以本博模板页档案 index.php 为例，给大家展示四个节点如何插入到对应的位置。当然这个示例只是为了更好的解释上面的程序策划结论，并不限于这种设定方法。大家在需要的地方可以发挥更多的想象，举一反三创造出更绚丽的样式。

index.php 档案代码