进度事件

进度事件的种类

进度事件用来描述资源加载的进度，主要由 AJAX 请求、<img>、<audio>、<video>、<style>、<link>等外部资源的加载触发，继承了ProgressEvent接口。它主要包含以下几种事件。

  • abort：外部资源中止加载时（比如用户取消）触发。如果发生错误导致中止，不会触发该事件。
  • error：由于错误导致外部资源无法加载时触发。
  • load：外部资源加载成功时触发。
  • loadstart：外部资源开始加载时触发。
  • loadend：外部资源停止加载时触发，发生顺序排在error、abort、load等事件的后面。
  • progress：外部资源加载过程中不断触发。
  • timeout：加载超时时触发。

注意，除了资源下载，文件上传也存在这些事件。

下面是一个例子。

  1. image.addEventListener('load', function (event) {
  2.   image.classList.add('finished');
  3. });
  5. image.addEventListener('error', function (event) {
  6.   image.style.display = 'none';
  7. });

上面代码在图片元素加载完成后，为图片元素添加一个finished的 Class。如果加载失败，就把图片元素的样式设置为不显示。

有时候，图片加载会在脚本运行之前就完成，尤其是当脚本放置在网页底部的时候，因此有可能load和error事件的监听函数根本不会执行。所以，比较可靠的方式，是用complete属性先判断一下是否加载完成。

  1. function loaded() {
  2.   // ...
  3. }
  5. if (image.complete) {
  6.   loaded();
  7. } else {
  8.   image.addEventListener('load', loaded);
  9. }

由于 DOM 的元素节点没有提供是否加载错误的属性，所以error事件的监听函数最好放在<img>元素的 HTML 代码中，这样才能保证发生加载错误时百分之百会执行。

  1. <img src="/wrong/url" onerror="this.style.display='none';" />

loadend事件的监听函数，可以用来取代abort事件、load事件、error事件的监听函数，因为它总是在这些事件之后发生。

  1. req.addEventListener('loadend', loadEnd, false);
  3. function loadEnd(e) {
  4.   console.log('传输结束，成功失败未知');
  5. }

loadend事件本身不提供关于进度结束的原因，但可以用它来做所有加载结束场景都需要做的一些操作。

另外，error事件有一个特殊的性质，就是不会冒泡。所以，子元素的error事件，不会触发父元素的error事件监听函数。

ProgressEvent 接口

ProgressEvent接口主要用来描述外部资源加载的进度，比如 AJAX 加载、<img>、<video>、<style>、<link>等外部资源加载。进度相关的事件都继承了这个接口。

浏览器原生提供了ProgressEvent()构造函数，用来生成事件实例。

  1. new ProgressEvent(type, options)

ProgressEvent()构造函数接受两个参数。第一个参数是字符串，表示事件的类型，这个参数是必须的。第二个参数是一个配置对象，表示事件的属性，该参数可选。配置对象除了可以使用Event接口的配置属性，还可以使用下面的属性，所有这些属性都是可选的。

  • lengthComputable：布尔值，表示加载的总量是否可以计算，默认是false。
  • loaded：整数，表示已经加载的量，默认是0。
  • total：整数，表示需要加载的总量，默认是0。

ProgressEvent具有对应的实例属性。

  • ProgressEvent.lengthComputable
  • ProgressEvent.loaded
  • ProgressEvent.total

如果ProgressEvent.lengthComputable为false，ProgressEvent.total实际上是没有意义的。

下面是一个例子。

  1. var p = new ProgressEvent('load', {
  2.   lengthComputable: true,
  3.   loaded: 30,
  4.   total: 100,
  5. });
  7. document.body.addEventListener('load', function (e) {
  8.   console.log('已经加载：' + (e.loaded / e.total) * 100 + '%');
  9. });
  11. document.body.dispatchEvent(p);
  12. // 已经加载：30%

上面代码先构造一个load事件，抛出后被监听函数捕捉到。

下面是一个实际的例子。

  1. var xhr = new XMLHttpRequest();
  3. xhr.addEventListener('progress', updateProgress, false);
  4. xhr.addEventListener('load', transferComplete, false);
  5. xhr.addEventListener('error', transferFailed, false);
  6. xhr.addEventListener('abort', transferCanceled, false);
  8. xhr.open();
  10. function updateProgress(e) {
  11.   if (e.lengthComputable) {
  12.     var percentComplete = e.loaded / e.total;
  13.   } else {
  14.     console.log('不能计算进度');
  15.   }
  16. }
  18. function transferComplete(e) {
  19.   console.log('传输结束');
  20. }
  22. function transferFailed(evt) {
  23.   console.log('传输过程中发生错误');
  24. }
  26. function transferCanceled(evt) {
  27.   console.log('用户取消了传输');
  28. }

上面是下载过程的进度事件，还存在上传过程的进度事件。这时所有监听函数都要放在XMLHttpRequest.upload对象上面。

  1. var xhr = new XMLHttpRequest();
  3. xhr.upload.addEventListener('progress', updateProgress, false);
  4. xhr.upload.addEventListener('load', transferComplete, false);
  5. xhr.upload.addEventListener('error', transferFailed, false);
  6. xhr.upload.addEventListener('abort', transferCanceled, false);
  8. xhr.open();