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