(95)Wangdao.com_第二十八天_进度事件

进度事件

进度事件 用来描述资源加载的进度，

主要由 AJAX 请求、<img>、<audio>、<video>、<style>、<link>等外部资源的加载触发

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

• abort        外部资源中止加载时（比如用户取消）触发。        如果发生错误导致中止，不会触发该事件。
  error        由于错误导致外部资源无法加载时触发。        有一个特殊的性质，就是不会冒泡。所以，子元素的error事件，不会触发父元素的error事件监听函数
  load        外部资源加载成功时触发。
  loadstart        外部资源开始加载时触发。
  loadend        外部资源停止加载时触发，发生顺序排在error、abort、load等事件的后面。
  progress        外部资源加载过程中不断触发。
  timeout        加载超时时触发。

• 实例

• image.addEventListener('load', function (event) {
      image.classList.add('finished');
  });
  
  image.addEventListener('error', function (event) {
      image.style.display = 'none';
  });

 

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

• var progress = new ProgressEvent(type, options)
  

• 第一个参数 是字符串，表示事件的类型，这个参数是必须的。
• 第二个参数是一个配置对象，表示事件的属性，该参数可选。

配置对象除了可以使用 Event 接口的配置属性，还可以使用下面的属性，所有这些属性都是可选的

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

• ProgressEvent 具有对应的实例属性

event.lengthComputable

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

event.loaded

1

event.total        

 

• 2

• var p = new ProgressEvent('load', {
      lengthComputable: true,
      loaded: 30,
      total: 100,
  });
  
  document.body.addEventListener('load', function (e) {
      console.log('已经加载：' + (e.loaded / e.total) * 100 + '%');
  });
  
  document.body.dispatchEvent(p);
  // 已经加载：30%

• 下载过程 实例

• var xhr = new XMLHttpRequest();
  
  xhr.addEventListener('progress', function updateProgress(e) {
      if (e.lengthComputable) {
          var percentComplete = e.loaded / e.total;
      }else{
          console.log('不能计算进度');
      }
  }, false);
  
  xhr.addEventListener('load', function transferComplete(e) {
      console.log('传输结束');
  }, false);
  
  xhr.addEventListener('error', function transferFailed(evt) {
      console.log('传输过程中发生错误');
  }, false);
  
  xhr.addEventListener('abort', function transferCanceled(evt) {
      console.log('用户取消了传输');
  }, false);
  
  xhr.open();

• 上传过程实例

• var xhr = new XMLHttpRequest();
  
  xhr.upload.addEventListener('progress', updateProgress, false);
  xhr.upload.addEventListener('load', transferComplete, false);
  xhr.upload.addEventListener('error', transferFailed, false);
  xhr.upload.addEventListener('abort', transferCanceled, false);
  
  xhr.open();