新浦京81707con > 注册购买 > 写一个网页进度loading

原标题:写一个网页进度loading

浏览次数:122 时间:2019-05-02

写二个网页进程loading

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

初稿出处: jack_lo   

loading到处可知,比如二个app平时会有下拉刷新,上拉加载的功用,在刷新和加载的进度中为了让用户感知到 load 的长河,大家会使用一些衔接动画来表明。最布满的诸如“转圈圈”,“省略号”等等。

网页loading有多数用处,比如页面包车型地铁加载进程,数据的加载进度等等,数据的加载loading很好做,只须要在加载数据此前(before ajax)展现loading效果,在数据返回之后(ajax completed)甘休loading效果,就足以了。

不过页面包车型客车加载进度,需求或多或少才能。

页面加载进程一贯以来都是2个常见而又晦涩的急需,常见是因为它在有个别“重”网页(尤其是网络游戏)的使用尤其重大;晦涩是因为web的特点,各类零散财富支配它很难是“真实”的进程,只好是一种“假”的速度,至少在逻辑代码加载成功之前,我们都无法计算到速度,而逻辑代码本身的速度也无力回天总括。此外,大家不容许监察和控制到全部财富的加载意况。

从而页面包车型大巴加载进程都以“假”的,它存在的目的是为着进步用户体验,使用户不至于在开拓页面之后长日子面对一片空白,导致用户流失。

既然是“假”的,大家就要到位“仿真”才有用。仿真是有意义的,事实上用户并不在乎某一刻你是否真的加载到了百分之几,他只关切你还要load多长期。所以接下去大家就来落到实处一个页面加载进程loading。

率先筹划壹段loading的html:

XHTML

<!DOCTYPE html> <html> <head> <title>写1个网页进程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流程就有了,大家扩充2个速度的效劳,每隔100ms就自增一,一直到百分百完工,而壹方面window loaded的时候,大家把loading给隐蔽。

我们来补充一下进程:

JavaScript

var $loading = $('#loading') var $progress = $('#progress') var prg = 0 // 初阶化进程 var timer = window.setInterval(() => { // 设置停车计时器if (prg >= 100) { // 达到终点,关闭放大计时器 window.clearInterval(timer) prg = 十0 } else { // 未到巅峰,进程自增 prg } $progress.html(prg '%') console.log(prg) }, 拾0) 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()
}

作用不错,但是有个难点,万1window loaded太慢了,导致进度展现load到百分之百了,loading还一向不藏身,那就打脸了。所以,大家须要让loading在window loaded的时候才抵达顶峰,在那前边,loading能够维持多少个等候的景色,举例在8/10的时候,先停一停,然后在loaded的时候急速将进度推至百分百。那个做法是最近绝大部份进度条的做法。

JavaScript

var $loading = $('#loading') var $progress = $('#progress') var prg = 0 var timer = window.setInterval(() => { if (prg >= 80) { // 达到第贰阶段4/5,关闭放大计时器,保持等待 window.clearInterval(timer) prg = 拾0 } else { prg } $progress.html(prg '%') console.log(prg) }, 十0) window.onload = () => { window.clearInterval(timer) window.setInterval(() => { if (prg >= 十0) { // 达到顶峰,关闭机械漏刻 window.clearInterval(timer) prg = 拾0 $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)
}

我们收获了2个progress函数,那个函数便是我们入眼的功用模块,通过传播三个目标值、1个光阴间隔,就能够效仿进度的演变进程。

现阶段来看,那些速度依旧不怎么标题标:

  1. 速度太平均,同样的年华间隔,同样的增量,不合乎网络蒙受的表征;
  2. window.onload太快,大家还不比看清百分百,loading就早已丢失了;
  3. 历次第壹品级都是在五分之四就暂停了,露馅儿了;

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

增量随机很好办,怎么样让时刻间隔随机?setInterval是力不从心动态设置delay的,那么我们就要把它改换一下,使用setTimeout来落实。(setInterval跟set提姆eout的用法和界别就不细说了吧?)

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(() => { // 延迟了1秒再隐藏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,还有一个比较隐蔽的主题素材,大家今后接纳window.onload,发现从进来页面,到window.onload那个中相隔时间非常长,我们基本是感受不到第一品级速度(五分四)的,那是不曾难题的——大家注意的是,如若页面包车型大巴加载能源数量过多,体量比较大的时候,从进入页面,到window.onload就不是这么火速了,那中间恐怕会很深刻(伍~20秒不等),但骨子里,大家只需求为 首屏财富 的加载争取时间就足以了,无需拭目以俟全体能源就绪,而且越来越快地显示页面也是增进用户体验的基本点。

大家应有思考页面loading停留过久的情况,大家须求为loading设置3个超时时间,超过那一个日子,如果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() }, 1000) }) } window.setTimeout(() => { // 设置伍秒的过期时间 progress(100, [1, 5], 十, () => { window.setTimeout(() => { // 延迟了1秒再隐藏loading $loading.hide() }, 一千) }) }, 6000) 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
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
  }
}

我们平昔设置了2个沙漏,伍s的时日来作为超时时间。那样做是可以的。

but,依旧有标题,那几个机械漏刻是在js加载完成之后才起来生效的,也正是说,我们忽视了js加载实现在此之前的时日,这标称误差可大可小,大家设置的伍s,实际用户可能等待了8s,那是有标题标。我们做用户体验,须要从实际上情况去惦念,所以这几个开始时间还索要再提前一些,大家在head里来记录那些开头时间,然后在js个中去做比较,固然时光差大于超时时间,那我们就足以间接执行最后的实现步骤,借使低于超时时间,则等待 余下的时光 过后,再造成速度。

先在head里埋点,记录用户进入页面包车型大巴岁月loadingStartTime

XHTML

<!DOCTYPE html> <html> <head> <title>写2个网页进程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], 十0) window.onload = () => { complete() } if (now - loadingStartTime > timeout) { // 超时 complete() } else { window.setTimeout(() => { // 未超时,则等待剩余时间 complete() }, timeout - (now - loadingStartTime)) } function complete () { // 封装完毕速度成效 progress(十0, [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
  }
}

由来,大家总算完整地得以达成了那1功力。

而是,事情还并未有甘休,少年你太天真。

比如目标是为着写1个原原本本障眼法的伪loading,那跟别的loading的落成就没怎么界别了,大家办事讲究踏踏实实,能兑现的兑现,不能兑现的,为了组织和煦,大家不得已坑害蒙骗拐骗。那么我们还是能更近乎实际情况一点吗?其实是能够的。

笔者们来分析1个景观,纵然大家想让我们的loading尤其根据各市的具体情况制定方案一些,那么大家可以选拔性地对页面上多少个比相当大的财富的加载进行追踪,然后拆分整个进程条,举例大家页面有3张大图a、b、c,那么大家将进程条拆成伍段,每加载完一张图我们就拉动一个速度:

随机初叶化[10, 20] ->
图a推进20%的进度 ->
图b推进25%的进度 ->
图c推进30%的进度 ->
完成100%

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

问题是,假如图片加载成功是依据顺序来的,那大家得以很简短地:拾(借使早先进度是百分之十) -> 30 -> 55 -> 85 -> 拾0,但真相是,图片不会根据顺序来,什么人早到什么人晚到是说不准的,所以大家须求更合理的法门去处理这么些进度增量,使它们不会相互覆盖。

  1. 咱俩必要二个可见替大家计算增量的变量next
  2. 出于大家的progress都以传目标快慢的,大家必要此外二个函数add,来传增量进度。

JavaScript

var $loading = $('#loading') var $progress = $('#澳门葡京手机app,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 是1个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])  // 飞一般地冲向终点
}

木油错,玖四这么简单!

这大概是本身日前写过最短的博文了,因而看出从前是有多么的啰嗦,哈哈哈哈!

1 赞 13 收藏 2 评论

澳门葡京手机app 1

复制代码 代码如下:

复制代码 代码如下:

本文由新浦京81707con发布于注册购买,转载请注明出处:写一个网页进度loading

关键词: 新浦京81707con javascript

上一篇:高性能移动端开发

下一篇:没有了