我们随处可见，比如一款APP经常会有下拉刷新，上拉加载的功能，为了让用户在刷新和加载过程中感受到加载的过程，我们会用一些过渡动画来表现，最常见的就是“圆圈”和“省略号”等。

网页有很多用处，比如页面加载进度一个网页下拉功能怎么实现的，数据加载过程等，数据加载很简单，只需要在数据加载前显示效果（ajax），数据返回后结束效果（ajax）即可。

但是页面的加载进度需要一点技巧。

页面加载进度一直是一个常见但又不太明显的需求。说它常见，是因为它在一些“重度”网页（尤其是网页游戏）中尤为重要；说它不太明显，是因为网页的特性。各种分散的资源决定了它很难是一个“真”的进度，而只能是一个“假”的进度。至少在逻辑代码加载完成之前，我们无法统计进度，逻辑代码本身的进度也无法统计。另外，我们也不可能监控所有资源的加载状态。

所以，页面的加载进度是“假的”下拉平台百度★64xl.com轻松做下拉词，哔站下拉框，它的目的在于提高用户体验，让用户不至于打开页面之后长时间面对空白页面，从而导致用户流失。

既然是“假的”，那我们就得“模拟”一下才有用。模拟才有意义，其实用户并不关心你在某一时刻是不是真的加载到了某个百分比，他们只关心你还需要多长时间才能加载完成。所以接下来我们来实现一个页面加载进度。

首先准备一段HTML：

=""id="">

0％

让我们稍微打扮一下：

{

：；

：；

顶部：0；

左：0；

：100%；

：100%；

-：#fff；

z-：5；

...{

：-细胞;

-:;

文本-：;

我们假设这个只需要在页面加载完成后隐藏，中间不需要显示进度。那么就很简单了，我们首先想到的就是：

（以下内容为了演示方便一个网页下拉功能怎么实现的，默认使用，语法为es6   ）

变量$=$('#')

变量$=$('#')

.=()=>{

$.隐藏()

好了，基本流程已经完成了。我们添加一个进度效果，每次增加 1，直到达到 100%。另一方面，我们将其隐藏。

让我们添加一些进度：

变量$=$('#')

变量$=$('#')

=0//初始化进度

=.(()=></p> 设置计时器

if(prg>=100){// 到达终点，关闭定时器

.()

prg=100

}else{// 未到达终点，进度自动增加

prg++

$.html(prg+'%')

.log（程序）

},100）

.=()=>{

$.隐藏()

效果不错，但是有个问题，如果太慢，进度条加载到100%也不会隐藏，所以需要等到最后，在这之前可以一直等待，比如80%的时候可以先停下，等到最后再快速把进度推到100%，这也是大部分进度条采用的方法。

变量$=$('#')

变量$=$('#')

=0

=.(()=>{

if(prg>=80){// 达到第一阶段的80%，关闭计时器，继续等待

.()

prg=100

}别的{

prg++

$.html(prg+'%')

.log（程序）

},100）

.=()=>{

.()

.(()=>{

if(prg>=100){// 到达终点，关闭定时器

.()

prg=100

$.隐藏()

}别的{

prg++

$.html(prg+'%')

.log（程序）

},10)// 时间间隔缩短

好了，这差不多就是我们想要的功能了，我们来细化一下代码，把重复的代码封装一下：

变量$=$('#')

变量$=$('#')

=0

=0

(80,100)

.=()=>{

（100,10,（）=>{

$.隐藏()

}）

（距离，，）{

.()

=.(()=>{

如果（prg> = dist）{

.()

prg=距离

&&()

}别的{

prg++

$.html(prg+'%')

.log（程序）

},)

我们得到了一个函数，也就是我们的主要功能模块，通过传入一个目标值和一个时间间隔，就可以模拟进度的演变。

目前，这一进展还存在一些问题：

进度过于均匀，时间间隔相同，增量相同，不符合网络环境的特点；

.太快了，还没来得及看清楚，它就没了；

第一阶段每次暂停到80%就暴露了；

对于第一点，我们要让时间间隔和增量随机化；第二点很简单，我们只需要将其延迟即可；第三点还要求我们随机生成一个初始值。

增量随机化很容易实现，但是如何让时间间隔随机呢？它不能动态设置，所以我们必须修改它并使用它来实现。（它的用法和区别我就不细说了，对吧？）

变量$=$('#')

变量$=$('#')

=0

=0

([80,90],[1,3],100) //用数组表示随机数区间

.=()=>{

（100，[1,5]，10，（）=>{

.(()=></p> 延迟一秒后隐藏

$.隐藏()

},1000）

}）

（距离，，，）{

=(距离)

=()

=()

.()

=.(()=>{

如果（prg +> =）{

.()

prg=

&&()

}别的{

prg+=

（，，，）

$.html((prg)+'%') //注意，由于不是按1递增，所以这里需要向上取整

.log（程序）

},)

（n）{

如果（===''）{

=n[1]-n[0]

=n[0]

.()*+

}别的{

至此，我们已经几乎完成要求了。

但是，还有一个更隐蔽的问题，我们现在在使用时，发现从进入页面到打开的时间非常短，基本感觉不到第一阶段（80%）的进度。这个不算问题——我们在乎的是，如果页面加载的资源数量很多，体积很大，那么从进入页面到打开的时间就不会那么快，可能会很长（5到20秒）。但其实，我们只需要为加载首屏资源争取时间，没必要等待所有资源都准备好。而且，更快的页面呈现也是提升用户体验的关键。

我们要考虑页面停留时间过长的情况，需要设置一个超时时间，如果超过这个时间，假设页面还没完成，我们也需要把进度推到100%然后结束。

变量$=$('#')

变量$=$('#')

=0

=0

([80,90],[1,3],100) //用数组表示随机数区间

.=()=>{

（100，[1,5]，10，（）=>{

.(()=></p> 延迟一秒后隐藏

$.隐藏()

},1000）

}）

.(()=></p> 设置 5 秒的超时时间

（100，[1,5]，10，（）=>{

.(()=></p> 延迟一秒后隐藏

$.隐藏()

},1000）

}）

,5000)

（距离，，，）{

=(距离)

=()

=()

.()

=.(()=>{

如果（prg +> =）{

.()

prg=

&&()

}别的{

prg+=

（，，，）

$.html((prg)+'%') //注意，由于不是按1递增，所以这里需要向上取整

.log（程序）

},)

（名词）

如果（===''）{

=n[1]-n[0]

=n[0]

.()*+

}别的{

我们直接设置一个定时器，超时时间为5s，这样就可以了。

但是，还有一个问题，这个定时器是js加载完成后才生效的，也就是说我们忽略了js加载前的时间，这个误差可大可小，我们设置了5s，但是实际用户可能要等8s，这个是有问题的。我们做用户体验的时候，需要考虑实际情况，所以这个开始时间需要提前，我们在head里记录这个开始时间，然后在js里对比，如果时间差大于超时时间，就直接执行最后的完成步骤，如果小于超时时间，就等待剩余时间过去后再完成进度。

首先在头部放置一个点，记录用户进入页面的时间：

=""id="">

0％

然后我们对比一下当前时间，看是否已经超时：（为了方便代码复用，我把完成的部分封装成了函数）

变量$=$('#')

变量$=$('#')

=0

=0

=()//记录当前时间

=5000//超时

（[80,90],[1,3],100）

.=()=>{

（）

if(now->){//超时

（）

}别的{

.(()=></p> 如果尚未超时，则等待剩余时间

（）

}，-（现在-））

(){// 封装进度函数

（100，[1,5]，10，（）=>{

.(()=>{

$.隐藏()

},1000）

}）

（距离，，，）{

=(距离)

=()

=()

.()

=.(()=>{

如果（prg +> =）{

.()

prg=

&&()

}别的{

prg+=

（，，，）

$.html((prg)+'%')

.log（程序）

},)

（名词）

如果（===''）{

=n[1]-n[0]

=n[0]

.()*+

}别的{

至此，我们已经完整实现了这个功能。

可是，事情还没有结束，年轻人，你太天真了。

如果目的就是为了写一个假的，纯粹是坑蒙拐骗，那跟其他实现没什么区别，我们做事踏实，能实现的就实现，不能实现的为了团队和谐，就得坑蒙拐骗，那么能不能更贴近实际情况呢？其实是可以的。

我们来分析一个场景，假设我们想让我们的更加逼真，那么我们可以选择性的跟踪页面上几个比较大的资源的加载，然后对整个进度条进行拆分。比如我们的页面有a、b、c三张大图，那么我们将进度条拆分成五段，每加载完一张图片我们就前进一段进度条：

随机初始化 [10, 20] ->

图a推进了20%的进度->

图b推进25%的进度->

图c 推进30%的进度->

100% 完成

这三张图片将占20％+25％+30％=75％的进度。

问题是，如果图像是按顺序加载的，那么我们可以很简单地做到：10（假设初始进度是 10%）-> 30 -> 55 -> 85 -> 100，但事实是图像不会按顺序出现，而且不清楚谁会先到，谁会晚到，所以我们需要一种更合理的方式来管理这些进度增量，使它们不会互相覆盖。

接下来我们需要一个可以为我们累积增量的变量；

由于我们传递的都是目标进度，所以我们需要另外一个函数add来传递增量进度。

变量$=$('#')

变量$=$('#')

=0

=0

=()

=5000

=prg

add([30,50],[1,3],100) // 第一阶段

.(()=></p> 模拟图像a已加载

添加（20，[1,3]，200）

},1000）

.(()=></p> 模拟图像c已加载

添加（30，[1,3]，200）

},2000)

.(()=></p> 模拟图像b已加载

添加（25，[1,3]，200）

},2500）

.=()=>{

（）

如果（现在->）{

（）

}别的{

.(()=>{

（）

}，-（现在-））

（）{

添加（100，[1,5]，10，（）=>{

.(()=>{

$.隐藏()

},1000）

}）

（距离，，，）{

=(距离)

if(next+>100){// 修剪并对齐多余的部分

下一个=100

}别的{

下一个+=

（下一个，，，）

（距离，，，）{

=()

=()

.()

=.(()=>{

如果（prg +> = dist）{

.()

prg=距离

&&()

}别的{

prg+=

（距离,,,）

$.html((prg)+'%')

.log（程序）

},)

（名词）

如果（===''）{

=n[1]-n[0]

=n[0]

.()*+

}别的{

为了方便，我们用它来模拟图片的加载，真正的应用应该使用 。

以上就是一步步实现一个进度的过程，关于演示代码可以点击我的写一个网页进度。

看似很简单的一个功能，但是仔细想想，还是有很多细节需要考虑的。

到这一步其实就完成了。代码有点长，有点乱，可以整理一下，然后打包成插件。

不过，嗯，我其实已经把这个进度打包成插件了……

没错，我其实是来给自己做广告的……

嗯，仓库就在这儿。

ez- 是一个 web（伪）进度插件，使用 ez- 实现该功能非常简单：

=（'ez-'）

=()

变量$=$('#')

变量$=$('#')

prg.on('',(res){

=(res.)// 注意进度四舍五入，否则可能会有小数

$.html(+'%')

}）

prg.go([60,70],(res){

(null,[0,5],[0,50]) // 冲向终点线

},[0,3],[0,200])

.=(){

(null,[0,5],[0,50]) // 冲向终点线

你错了，94就是这么简单！