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

最新推荐文章于 2019-03-06 23:43:00 发布

aof26372

最新推荐文章于 2019-03-06 23:43:00 发布

阅读量108

点赞数

原文链接：http://www.cnblogs.com/tianxiaxuange/p/10105405.html

版权

进度事件

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

主要由 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

event.total

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