如何编写一个既能显示下载进度又能展示播放进度的JavaScript进度条功能？

本文共计1473个文字，预计阅读时间需要6分钟。

技术上难度不大，但难点在于如何让整个动画流畅。一个主要问题是动画的滞后性：当下载进度到某个点时，再用250ms的动画过渡，这时已经慢了，所以很多人觉得慢。

术上没太大难度，有难度的地方是怎么让整个动画比较流畅。一个主要问题是动画的滞后性：当下载进度到某个点的时候，你再用250ms的动画过渡过去，这个时候已经慢了，所以很多人可能因为这个原因或者嫌麻烦，直接就不做动画了，在进度事件触发的时候直接更新进度条相应的位置，不过我们可以尝试实现一下。

最后做出来的效果如下图所示：

小狗奔跑的动画是一个lottie动画，来自 codepen 。

1. 获取下载进度

ajax里面可以拿到下载进度，如下代码所示：

let xhr = new XMLHttpRequest(); const downloadUrl = 'installer.dmg'; xhr.open('GET', downloadUrl, true); xhr.addEventListener('progress', function (event) { // 响应头要有Content-Length if (event.lengthComputable) { let percentComplete = event.loaded / event.total; console.log(percentComplete); // 最后输出1 } }, false); xhr.send();

前提是响应头里面有Content-Length这个字段告知当前文件的总字节数，如下图所示：

一般CDN都会有这个字段。