ProgressEvent

ProgressEvent 是一个用来测量底层操作进度的接口，可以测量HTTP请求（例如：一个 XMLHttpRequest请求、或者一个底层资源如 <img>, <audio>, <video>, <style> or <link>).

 

Constructor

ProgressEvent()

用给定的参数创造一个ProgressEvent

The ProgressEvent() constructor returns a newly created ProgressEvent, representing the current completion of a long process.

progressEvent = new ProgressEvent(type, {lengthComputable: aBooleanValue, loaded: aNumber, total: aNumber});

The ProgressEvent() constructor also inherits arguments from Event().

type
Is a DOMString representing the name of the type of the ProgressEvent. It is case-sensitive.
lengthComputable Optional
Is a Boolean flag indicating if the total work to be done, and the amount of work already done, by the underlying process is calculable. In other words, it tells if the progress is measurable or not. It defaults to false.
loaded Optional
Is an unsigned long long representing the amount of work already performed by the underlying process. The ratio of work done can be calculated with the property and ProgressEvent.total. When downloading a resource using HTTP, this only represent the part of the content itself, not headers and other overhead. It defaults to 0.
total Optional
Is an unsigned long long representing the total amount of work that the underlying process is in the progress of performing. When downloading a resource using HTTP, this only represent the content itself, not headers and other overhead. It defaults to 0.

 

Properties

同时继承它的父元素 Event 的属性。

ProgressEvent.lengthComputable 只读

它是一个布尔值标识，表明总共需要完成的工作量和已经完成的工作是否可以被底层所计算到。换而言之，它表示的就是过程是否是可以测量的。

flag = ProgressEvent.lengthComputable

ProgressEvent.loaded 只读

的ProgressEvent.loaded只读属性是表示已经通过基础过程所执行的工作的量的整数。可以使用属性和来计算完成的工作比率ProgressEvent.total。使用HTTP下载资源时，这仅代表内容本身的一部分，而不代表标头和其他开销。unsigned long long类型

value = ProgressEvent.loaded

ProgressEvent.total 只读

是unsigned long long类型，表示底层进程正在执行的工作总量。当使用HTTP下载资源时，这只表示内容本身，而不是头和其他开销。

value = ProgressEvent.total

 

 var progressBar = document.getElementById("p"),
      client = new XMLHttpRequest()
  client.open("GET", "magical-unicorns")
  client.onprogress = function(pe) {
    if(pe.lengthComputable) {
      progressBar.max = pe.total
      progressBar.value = pe.loaded
    }
  }
  client.onloadend = function(pe) {
    progressBar.value = pe.loaded
  }
  client.send()