一个简单的解决方法是假定下一个250ms的下载速度保持一致，每次运动的时候都提前运动250ms，如果在播放video的例子里面这个假定几乎是对的，因为比较匀速，而下载速度不可控，但在连续相同很短的时间内我们估且认为是一样。
所以我们可以记录一下上一次的位置，然后加多一个偏移，如下代码所示：
let diffX = (event.loaded - lastMB) / event.total * containerWidth; // 在原本的基础上再加多一个偏移（且不能超过容器的宽度） let left = Math.min(containerWidth, containerWidth * percentComplete + diffX); lastMB = downloadedMB;
这样就比较对得上了，效果如下图所示：
这个案例到这里基本就介绍结束，这个例子比较简单，不过你可能会觉得web animation的兼容性不太好。主要是在Chrome的兼容性比较好，其它主流的浏览器的新版本也已经开始支持了。其它不支持的浏览器可以使用谷歌官方的一个 polyfill ，就是比较大一点。它和CSS动画一样，但是可以用JS去控制开始暂停等，所以它和CSS动画一样具有GPU加速，不占用JS线程等优势。
总结
以上所述是小编给大家介绍的JS中实现一个下载进度条及播放进度条的代码，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！
您可能感兴趣的文章: