HTML | DOM 进度事件

ProgressEvent 接口表示测量底层进程进度的事件，例如 HTTP 请求或 img、音频、视频或链接的底层资源的加载。

句法：

ProgressEvent.lengthComputable|loaded|total

返回值：它返回一个字符串值，表示长度可计算、已加载或进度的总度量。

属性： ProgressEvent 的属性继承自其父事件。

• ProgressEvent.lengthComputable：它是一个只读属性，包含一个布尔标志，指示 ProgressEvent 所关注的资源具有可计算的长度。
• ProgressEvent.loaded：它是一个只读属性，包含表示底层进程已经执行的工作量的整数。可以使用属性和 ProgressEvent.total 计算完成工作的比率。当您使用 HTTP 下载资源时，这只会代表内容本身的一部分，而不是标头和其他开销。
• ProgressEvent.total：它是一个只读属性，表示底层进程正在执行的工作总量。当您使用 HTTP 下载资源时，这只会代表内容本身的一部分，而不是标头和其他开销。

事件类型：

• onerror：加载外部文件时发生错误时发生的事件
• onloadstart：当浏览器开始寻找指定媒体时将发生该事件。

例子：

  

    DOM ProgressEvent

  

    
        GeeksforGeeks 
          
        Progress Bar:
        
  
        
            var progressBar = document.getElementById("geeks"),
                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();
        
    

  
                    

输出：

支持的浏览器： DOM ProgressEvent支持的浏览器如下：

• 铬 1.0
• 浏览器 9.0
• 火狐
• 苹果浏览器
• 歌剧