增量随机很好办,如何让时间间隔随机?setInterval是无法动态设置delay的,那么我们就要把它改造一下,使用setTimeout来实现。(setInterval跟setTimeout的用法和区别就不细说了吧?)
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这中间相隔时间十分短,我们基本是感受不到第一阶段进度(80%)的,这是没有问题的——我们在意的是,如果页面的加载资源数量很多,体积很大的时候,从进入页面,到window.onload就不是这么快速了,这中间可能会很漫长(5~20秒不等),但事实上,我们只需要为 首屏资源 的加载争取时间就可以了,不需要等待所有资源就绪,而且更快地呈现页面也是提高用户体验的关键。
我们应该考虑页面loading停留过久的情况,我们需要为loading设置一个超时时间,超过这个时间,假设window.onload还没有完成,我们也要把进度推到100%,把loading结束掉。
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:
<!DOCTYPE html> <html> <head> <title>动手实现一个网页加载进度loading</title> <script> window.loadingStartTime = new Date() </script> <script src="https://www.jb51.net/index.js"></script> </head> <body> <div> <div>0%</div> </div> </body> </html>
然后,我们对比 当前的时间 ,看是否超时:(为了方便复用代码,我把完成的部分封装成函数complete)