(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();