在刷新和加载的过程中为了让用户感知到

写贰个网页进程loading

2017/02/26 · JavaScript
· 2 评论 ·
Loading

原版的书文出处: jack_lo   

loading历历可知,譬如贰个app平日会有下拉刷新,上拉加载的效应,在刷新和加载的经过中为了让客户感知到
load
的进程,大家会利用部分接通动画来公布。最广大的诸如“转圈圈”,“省略号”等等。

网页loading有为数相当的多用处,比方页面包车型地铁加载进程,数据的加载进度等等,数据的加载loading很好做,只需求在加载数据在此之前(before
ajax)展现loading效果,在数码再次来到之后(ajax
completed)结束loading效果,就足以了。

可是页面包车型客车加载进程,供给或多或少技能。

页面加载进程长期以来都以多少个大面积而又晦涩的供给,常见是因为它在有些“重”网页(极度是网络电游)的使用极其首要性;晦涩是因为web的特点,各样零散能源支配它很难是“真实”的快慢,只好是一种“假”的进程,至少在逻辑代码加载成功以前,大家都不可能计算到速度,而逻辑代码自己的进度也力不从心总结。别的,大家不或然监察和控制到具有能源的加载情状。

就此页面包车型地铁加载进度都以“假”的,它存在的目标是为着进步客商体验,使顾客不至于在张开页面之后长日子面前碰到一片空白,导致客户流失。

既是是“假”的,大家就要做到“仿真”才有用。仿真是有意义的,事实上客商并不在乎某一刻你是或不是真的加载到了百分之几,他只关心你还要load多短时间。所以接下去大家就来兑现贰个页面加载进程loading。

率先计划一段loading的html:

XHTML

<!DOCTYPE html> <html> <head>
<title>写叁个网页进程loading</title> </head>
<body> <div class=”loading” id=”loading”> <div
class=”progress” id=”progress”>0%</div> </div>
</body> </html>

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
<head>
    <title>写一个网页进度loading</title>
</head>
<body>
  <div class="loading" id="loading">
    <div class="progress" id="progress">0%</div>
  </div>
</body>
</html>

来点样式装扮一下:

CSS

.loading { display: table; position: fixed; top: 0; left: 0; width:
100%; height: 100%; background-color: #fff; z-index: 5; } .loading
.progress { display: table-cell; vertical-align: middle; text-align:
center; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.loading {
  display: table;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  z-index: 5;
}
 
.loading .progress {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

我们先如若那么些loading只需求在页面加载成功现在遮掩,中间无需出示速度。那么很简短,大家第不常间想到的正是window.onload:

(以下内容为了有助于演示,默认使用jQuery,语法有es6的箭头函数)

JavaScript

var $loading = $(‘#loading’) var $progress = $(‘#progress’)
window.onload = () => { $loading.hide() }

1
2
3
4
5
6
var $loading = $(‘#loading’)
var $progress = $(‘#progress’)
 
window.onload = () => {
  $loading.hide()
}

ok,那样主题的loading流程就有了,大家扩张一个进程的功效,每隔100ms就自增1,一贯到100%完成,而一方面window
loaded的时候,大家把loading给遮盖。

大家来补充一下速度:

JavaScript

var $loading = $(‘#loading’) var $progress = $(‘#progress’) var prg =
0 // 初阶化进程 var timer = window.setInterval(() => { // 设置电磁料理计时器if (prg >= 100) { // 达到终点,关闭反应计时器 window.clearInterval(timer)
prg = 100 } else { // 未到顶点,进程自增 prg++ } $progress.html(prg +
‘%’) console.log(prg) }, 100) window.onload = () => { $loading.hide()
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var $loading = $(‘#loading’)
var $progress = $(‘#progress’)
var prg = 0  // 初始化进度
 
var timer = window.setInterval(() => {  // 设置定时器
  if (prg >= 100) {  // 到达终点,关闭定时器
    window.clearInterval(timer)
    prg = 100
  } else {  // 未到终点,进度自增
    prg++
  }
 
  $progress.html(prg + ‘%’)
  console.log(prg)
}, 100)
 
window.onload = () => {
  $loading.hide()
}

效果与利益不错,不过有个难题,万一window
loaded太慢了,导致进程展现load到百分百了,loading还未有藏匿,这就打脸了。所以,大家必要让loading在window
loaded的时候才达到顶峰,在那前面,loading能够维持三个等待的处境,比方在70%的时候,先停一停,然后在loaded的时候飞速将进程推至百分百。那个做法是当前绝大部份进程条的做法。

JavaScript

var $loading = $(‘#loading’) var $progress = $(‘#progress’) var prg =
0 var timer = window.setInterval(() => { if (prg >= 80) { //
达到第一阶段十分九,关闭放大计时器,保持等待 window.clearInterval(timer) prg =
100 } else { prg++ } $progress.html(prg + ‘%’) console.log(prg) }, 100)
window.onload = () => { window.clearInterval(timer)
window.setInterval(() => { if (prg >= 100) { //
达到极限,关闭计时器 window.clearInterval(timer) prg = 100
$loading.hide() } else { prg++ } $progress.html(prg + ‘%’)
console.log(prg) }, 10) // 时间间隔减少 }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
var $loading = $(‘#loading’)
var $progress = $(‘#progress’)
var prg = 0
 
var timer = window.setInterval(() => {
  if (prg >= 80) {  // 到达第一阶段80%,关闭定时器,保持等待
    window.clearInterval(timer)
    prg = 100
  } else {
    prg++
  }
 
  $progress.html(prg + ‘%’)
  console.log(prg)
}, 100)
 
window.onload = () => {
  window.clearInterval(timer)
  window.setInterval(() => {
    if (prg >= 100) {  // 到达终点,关闭定时器
      window.clearInterval(timer)
      prg = 100
      $loading.hide()
    } else {
      prg++
    }
 
    $progress.html(prg + ‘%’)
    console.log(prg)
  }, 10)  // 时间间隔缩短
}

ok,那基本上正是我们想要的职能了,大家来提炼一下代码,把重复的代码给封装一下:

JavaScript

var $loading = $(‘#loading’) var $progress = $(‘#progress’) var prg =
0 var timer = 0 progress(80, 100) window.onload = () => {
progress(100, 10, () => { $loading.hide() }) } function progress
(dist, delay, callback) { window.clearInterval(timer) timer =
window.setInterval(() => { if (prg >= dist) {
window.clearInterval(timer) prg = dist callback && callback() } else {
prg++ } $progress.html(prg + ‘%’) console.log(prg) }, delay) }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
var $loading = $(‘#loading’)
var $progress = $(‘#progress’)
var prg = 0
 
var timer = 0
 
progress(80, 100)
 
window.onload = () => {
  progress(100, 10, () => {
    $loading.hide()
  })
}
 
function progress (dist, delay, callback) {
  window.clearInterval(timer)
  timer = window.setInterval(() => {
    if (prg >= dist) {
      window.clearInterval(timer)
      prg = dist
      callback && callback()
    } else {
      prg++
    }
 
    $progress.html(prg + ‘%’)
    console.log(prg)
  }, delay)
}

我们得到了二个progress函数,那些函数便是我们重视的功用模块,通过传播二个目的值、五个时间距离,就能够效仿进程的演化进程。

当下来看,这么些速度照旧有点题目标:

  1. 速度太平均,同期间隔,同样的增量,不符合互连网蒙受的表征;
  2. window.onload太快,大家还不如看清百分之百,loading就曾经错失了;
  3. 每便第一品级都以在十分之九就半涂而废了,露馅儿了;

先是个点,大家要让时间间隔随机,增量也随意;第2个点很简短,大家延缓一下就好了;第三点也急需我们随便爆发一个初阶值。

增量随机很好办,怎么着让时光间隔随机?setInterval是无力回天动态设置delay的,那么大家就要把它更改一下,使用setTimeout来兑现。(setInterval跟setTimeout的用法和界别就不细说了啊?)

JavaScript

var $loading = $(‘#loading’) var $progress = $(‘#progress’) var prg =
0 var timer = 0 progress([80, 90], [1, 3], 100) //
使用数组来代表随机数的区间 window.onload = () => { progress(100, [1,
5], 10, () => { window.setTimeout(() => { //
延迟了一秒再遮掩loading $loading.hide() }, 一千) }) } function progress
(dist, speed, delay, callback) { var _dist = random(dist) var _delay =
random(delay) var _speed = random(speed) window.clearTimeout(timer)
timer = window.setTimeout(() => { if (prg + _speed >= _dist) {
window.clearTimeout(timer) prg = _dist callback && callback() } else {
prg += _speed progress (_dist, speed, delay, callback) }
$progress.html(parseInt(prg) + ‘%’) //
细心,由于已经不是自增1,所以那边要取整 console.log(prg) }, _delay) }
function random (n) { if (typeof n === ‘object’) { var times = n[1] –
n[0] var offset = n[0] return Math.random() * times + offset } else
{ return n } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
var $loading = $(‘#loading’)
var $progress = $(‘#progress’)
var prg = 0
 
var timer = 0
 
progress([80, 90], [1, 3], 100)  // 使用数组来表示随机数的区间
 
window.onload = () => {
  progress(100, [1, 5], 10, () => {
    window.setTimeout(() => {  // 延迟了一秒再隐藏loading
      $loading.hide()
    }, 1000)
  })
}
 
function progress (dist, speed, delay, callback) {
  var _dist = random(dist)
  var _delay = random(delay)
  var _speed = random(speed)
  window.clearTimeout(timer)
  timer = window.setTimeout(() => {
    if (prg + _speed >= _dist) {
      window.clearTimeout(timer)
      prg = _dist
      callback && callback()
    } else {
      prg += _speed
      progress (_dist, speed, delay, callback)
    }
 
    $progress.html(parseInt(prg) + ‘%’)  // 留意,由于已经不是自增1,所以这里要取整
    console.log(prg)
  }, _delay)
}
 
function random (n) {
  if (typeof n === ‘object’) {
    var times = n[1] – n[0]
    var offset = n[0]
    return Math.random() * times + offset
  } else {
    return n
  }
}

从那之后,大家差不离完毕了供给。

but,还有二个相比较隐藏的主题素材,大家今Smart用window.onload,发掘从踏向页面,到window.onload那中间相隔时间不够长,大家着力是感受不到第一等级速度(八成)的,那是从未难题的——大家注意的是,若是页面包车型大巴加载能源数量过多,容量相当的大的时候,从进来页面,到window.onload就不是如此飞速了,那中间恐怕会很遥远(5~20秒不等),但其实,大家只须要为
首屏能源
的加载争取时间就能够了,无需等待全体能源就绪,而且更加快地展现页面也是升高客商体验的首要。

咱们理应思虑页面loading停留过久的意况,大家供给为loading设置三个过期时间,超过那几个小时,假使window.onload还未有到位,大家也要把速度推到百分百,把loading停止掉。

JavaScript

var $loading = $(‘#loading’) var $progress = $(‘#progress’) var prg =
0 var timer = 0 progress([80, 90], [1, 3], 100) //
使用数组来代表随机数的间隔 window.onload = () => { progress(100, [1,
5], 10, () => { window.setTimeout(() => { //
延迟了一秒再掩饰loading $loading.hide() }, 一千) }) }
window.setTimeout(() => { // 设置5秒的逾期时间 progress(100, [1,
5], 10, () => { window.setTimeout(() => { //
延迟了一秒再遮盖loading $loading.hide() }, 一千) }) }, 五千) function
progress (dist, speed, delay, callback) { var _dist = random(dist) var
_delay = random(delay) var _speed = random(speed)
window.clearTimeout(timer) timer = window.setTimeout(() => { if (prg

  • _在刷新和加载的过程中为了让用户感知到。speed >= _dist) { window.clearTimeout(timer) prg = _dist
    callback && callback() } else { prg += _speed progress (_dist, speed,
    delay, callback) } $progress.html(parseInt(prg) + ‘%’) //
    细心,由于已经不是自增1,所以这边要取整 console.log(prg) }, _delay) }
    function random (n) { if (typeof n === ‘object’) { var times = n[在刷新和加载的过程中为了让用户感知到。1] –
    n[0] var offset = n[0] return Math.random() * times + offset } else
    { return n } }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
var $loading = $(‘#loading’)
var $progress = $(‘#progress’)
var prg = 0
 
var timer = 0
 
progress([80, 90], [1, 3], 100)  // 使用数组来表示随机数的区间
 
window.onload = () => {
  progress(100, [1, 5], 10, () => {
    window.setTimeout(() => {  // 延迟了一秒再隐藏loading
      $loading.hide()
    }, 1000)
  })
}
 
window.setTimeout(() => {  // 设置5秒的超时时间
  progress(100, [1, 5], 10, () => {
    window.setTimeout(() => {  // 延迟了一秒再隐藏loading
      $loading.hide()
    }, 1000)
  })
}, 5000)
 
function progress (dist, speed, delay, callback) {
  var _dist = random(dist)
  var _delay = random(delay)
  var _speed = random(speed)
  window.clearTimeout(timer)
  timer = window.setTimeout(() => {
    if (prg + _speed >= _dist) {
      window.clearTimeout(timer)
      prg = _dist
      callback && callback()
    } else {
      prg += _speed
      progress (_dist, speed, delay, callback)
    }
 
    $progress.html(parseInt(prg) + ‘%’)  // 留意,由于已经不是自增1,所以这里要取整
    console.log(prg)
  }, _delay)
}
 
function random (n) {
  if (typeof n === ‘object’) {
    var times = n[1] – n[0]
    var offset = n[0]
    return Math.random() * times + offset
  } else {
    return n
  }
}

笔者们直接设置了八个停车计时器,5s的岁月来作为超时时间。那样做是能够的。

but,依旧不通常,这一个放大计时器是在js加载达成之后才开首生效的,约等于说,大家忽略了js加载落成在此之前的年月,那基值误差可大可小,我们设置的5s,实际客商或然等待了8s,那是有题指标。大家做顾客体验,须求从真实情状去思考,所以这一个开端时间还亟需再提前一些,大家在head里来记录那个初叶时间,然后在js当中去做相比,尽管时光差大于超时时间,那大家就能够直接实行最终的达成步骤,假设低于超时时间,则等待
剩余的时间 过后,再产生速度。

在刷新和加载的过程中为了让用户感知到。先在head里埋点,记录顾客步向页面包车型大巴时光loadingStartTime

XHTML

<!DOCTYPE html> <html> <head>
<title>写三个网页过程loading</title> <script>
window.loadingStartTime = new Date() </script> <script
src=”index.js”></script> </head> <body> <div
class=”loading” id=”loading”> <div class=”progress”
id=”progress”>0%</div> </div> </body> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
<head>
  <title>写一个网页进度loading</title>
  <script>
    window.loadingStartTime = new Date()
  </script>
  <script src="index.js"></script>
</head>
<body>
  <div class="loading" id="loading">
    <div class="progress" id="progress">0%</div>
  </div>
</body>
</html>

然后,大家相比 眼下的时刻
,看是或不是过期:(为了方便复用代码,小编把成就的有的封装成函数complete)

JavaScript

var $loading = $(‘#loading’) var $progress = $(‘#在刷新和加载的过程中为了让用户感知到。progress’) var prg =
0 var timer = 0 var now = new Date() // 记录当前时间 var timeout = 五千// 超时时间 progress([80, 90], [在刷新和加载的过程中为了让用户感知到。1, 3], 100) window.onload = () =>
{ complete() } if (now – loadingStartTime > timeout) { // 超时
complete() } else { window.setTimeout(() => { //
未超时,则等待剩余时间 complete() }, timeout – (now – loadingStartTime))
} function complete () { // 封装实现速度作用 progress(100, [1, 5], 10,
() => { window.setTimeout(() => { $loading.hide() }, 1000) }) }
function progress (dist, speed, delay, callback) { var _dist =
random(dist) var _delay = random(delay) var _speed = random(speed)
window.clearTimeout(timer) timer = window.setTimeout(() => { if (prg

  • _speed >= _dist) { window.clearTimeout(timer) prg = _dist
    callback && callback() } else { prg += _speed progress (_dist, speed,
    delay, callback) } $progress.html(parseInt(prg) + ‘%’) console.log(prg)
    }, _delay) } function random (n) { if (typeof n === ‘object’) { var
    times = n[1] – n[0] var offset = n[0] return Math.random() *
    times + offset } else { return n } }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
var $loading = $(‘#loading’)
var $progress = $(‘#progress’)
var prg = 0
 
var timer = 0
var now = new Date()  // 记录当前时间
var timeout = 5000  // 超时时间
 
progress([80, 90], [1, 3], 100)
 
window.onload = () => {
  complete()
}
 
if (now – loadingStartTime > timeout) {  // 超时
  complete()
} else {
  window.setTimeout(() => {  // 未超时,则等待剩余时间
    complete()
  }, timeout – (now – loadingStartTime))
}
 
function complete () {  // 封装完成进度功能
  progress(100, [1, 5], 10, () => {
    window.setTimeout(() => {
      $loading.hide()
    }, 1000)
  })
}
 
function progress (dist, speed, delay, callback) {
  var _dist = random(dist)
  var _delay = random(delay)
  var _speed = random(speed)
  window.clearTimeout(timer)
  timer = window.setTimeout(() => {
    if (prg + _speed >= _dist) {
      window.clearTimeout(timer)
      prg = _dist
      callback && callback()
    } else {
      prg += _speed
      progress (_dist, speed, delay, callback)
    }
 
    $progress.html(parseInt(prg) + ‘%’)
    console.log(prg)
  }, _delay)
}
 
function random (n) {
  if (typeof n === ‘object’) {
    var times = n[1] – n[0]
    var offset = n[0]
    return Math.random() * times + offset
  } else {
    return n
  }
}

迄今甘休,大家究竟完整地完结了这一功用。

可是,事情还一直不终结,少年你太天真。

若果目标是为着写二个从头到尾障眼法的伪loading,那跟任何loading的贯彻就没怎么差别了,我们工作讲究不务空名,能促成的落到实处,不能够实现的,为了组织和谐,大家不得已坑蒙拐骗。那么大家还能更临近真实景况一点吧?其实是能够的。

大家来剖析四个地方,若是大家想让我们的loading尤其足履实地一些,那么我们能够接纳性地对页面上多少个异常的大的能源的加载进行追踪,然后拆分整个进程条,比方我们页面有三张大图a、b、c,那么我们将进程条拆成五段,每加载完一张图大家就有利于一个进度:

随便起头化[10, 20] ->
图a推进20%的进度 ->
图b推进25%的进度 ->
图c推进30%的进度 ->
完成100%

那三张图要占20% + 25% + 30% = 75%的进度。

主题素材是,假诺图片加载成功是服从顺序来的,那大家得以非常粗大略地:10(若是开首进度是一成)
-> 30 -> 55 -> 85 ->
100,但实际是,图片不会服从顺序来,什么人早到哪个人晚到是说不准的,所以大家供给更合理的法子去处理这几个进度增量,使它们不会相互覆盖。

  1. 我们必要三个能够替大家总结增量的变量next
  2. 由于我们的progress都以传目标进程的,我们须求其余八个函数add,来传增量进度。

JavaScript

var $loading = $(‘#loading’) var $progress = $(‘#progress’) var prg =
0 var timer = 0 var now = new Date() var timeout = 5000 var next = prg
add([30, 50], [1, 3], 100) // 第一阶段 window.setTimeout(() => {
// 模拟图a加载完 add(20, [1, 3], 200) }, 1000) window.setTimeout(()
=> { // 模拟图c加载完 add(30, [1, 3], 200) }, 2000)
window.setTimeout(() => { // 模拟图b加载完 add(25, [1, 3], 200) },
2500) window.onload = () => { complete() } if (now – loadingStartTime
> timeout) { complete() } else { window.setTimeout(() => {
complete() }, timeout – (now – loadingStartTime)) } function complete ()
{ add(100, [1, 5], 10, () => { window.setTimeout(() => {
$loading.hide() }, 1000) }) } function add (dist, speed, delay,
callback) { var _dist = random(dist) if (next + _dist > 100) { //
对超越部分裁剪对齐 next = 100 } else { next += _dist } progress(next,
speed, delay, callback) } function progress (dist, speed, delay,
callback) { var _delay = random(delay) var _speed = random(speed)
window.clearTimeout(timer) timer = window.setTimeout(() => { if (prg

  • _speed >= dist) { window.clearTimeout(timer) prg = dist callback
    && callback() } else { prg += _speed progress (dist, speed, delay,
    callback) } $progress.html(parseInt(prg) + ‘%’) console.log(prg) },
    _delay) } function random (n) { if (typeof n === ‘object’) { var times
    = n[1] – n[0] var offset = n[0] return Math.random() * times +
    offset } else { return n } }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
var $loading = $(‘#loading’)
var $progress = $(‘#progress’)
var prg = 0
 
var timer = 0
var now = new Date()
var timeout = 5000
 
var next = prg
 
add([30, 50], [1, 3], 100)  // 第一阶段
 
window.setTimeout(() => {  // 模拟图a加载完
  add(20, [1, 3], 200)
}, 1000)
 
window.setTimeout(() => {  // 模拟图c加载完
  add(30, [1, 3], 200)
}, 2000)
 
window.setTimeout(() => {  // 模拟图b加载完
  add(25, [1, 3], 200)
}, 2500)
 
window.onload = () => {
  complete()
}
 
if (now – loadingStartTime > timeout) {
  complete()
} else {
  window.setTimeout(() => {
    complete()
  }, timeout – (now – loadingStartTime))
}
 
function complete () {
  add(100, [1, 5], 10, () => {
    window.setTimeout(() => {
      $loading.hide()
    }, 1000)
  })
}
 
function add (dist, speed, delay, callback) {
  var _dist = random(dist)
  if (next + _dist > 100) {  // 对超出部分裁剪对齐
    next = 100
  } else {
    next += _dist
  }
 
  progress(next, speed, delay, callback)
}
 
function progress (dist, speed, delay, callback) {
  var _delay = random(delay)
  var _speed = random(speed)
  window.clearTimeout(timer)
  timer = window.setTimeout(() => {
    if (prg + _speed >= dist) {
      window.clearTimeout(timer)
      prg = dist
      callback && callback()
    } else {
      prg += _speed
      progress (dist, speed, delay, callback)
    }
 
    $progress.html(parseInt(prg) + ‘%’)
    console.log(prg)
  }, _delay)
}
 
function random (n) {
  if (typeof n === ‘object’) {
    var times = n[1] – n[0]
    var offset = n[0]
    return Math.random() * times + offset
  } else {
    return n
  }
}

我们这里为了便利,用setTimeout来模拟图片的加载,真实应用应该是选拔image.onload

上述,正是大家一步步兑现一个进程loading的历程了,演示代码可以戳小编的codePen
写三个网页进度loading。

好像很轻松的三个效用,其实留神斟酌,照旧有数不尽细节要考虑的。

到这里,其实确实已经到位了,代码有一点点多有一点乱是还是不是?你能够整理一下,封装成为插件的。

然则,好吧,其实自个儿已经把那个速度封装成插件了。。。

没有错,其实小编正是来帮团结打广告的。。。

可以吗,github货仓在此
ez-progress。

ez-progress 是一个web(伪)进程插件,使用 ez-progress
完毕那一个职能非常轻易:

JavaScript

var Progress = require(‘ez-progress’) var prg = new Progress() var
$loading = $(‘#loading’) var $progress = $(‘#progress’)
prg.on(‘progress’, function (res) { var progress =
parseInt(res.progress) // 注意进度取整,不然有望会出现小数
$progress.html(progress + ‘%’) }) prg.go([60, 70], function (res) {
prg.complete(null, [0, 5], [0, 50]) // 飞一般地冲向终点 }, [0, 3],
[0, 200]) window.onload = function () { prg.complete(null, [0, 5],
[0, 50]) // 飞一般地冲向终点 }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var Progress = require(‘ez-progress’)
var prg = new Progress()
 
var $loading = $(‘#loading’)
var $progress = $(‘#progress’)
 
prg.on(‘progress’, function (res) {
  var progress = parseInt(res.progress)  // 注意进度取整,不然有可能会出现小数
  $progress.html(progress + ‘%’)
})
 
prg.go([60, 70], function (res) {
  prg.complete(null, [0, 5], [0, 50])  // 飞一般地冲向终点
}, [0, 3], [0, 200])
 
window.onload = function () {
  prg.complete(null, [0, 5], [0, 50])  // 飞一般地冲向终点
}

木油错,94如此简单!

这只怕是自家当下写过最短的博文了,因而来看以前是有多么的啰嗦,哈哈哈哈!

1 赞 13 收藏 2
评论

图片 1

You may also like...

发表评论

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

网站地图xml地图