0
点赞
收藏
分享

微信扫一扫

每次提出一个bug都让测试重现,描述得那么清楚,自己操作下不会吗?

夏侯居坤叶叔尘 03-01 20:00 阅读 4

城市鸟瞰
文章简介

本篇文章为【JavaScript 漫游】专栏第 025 篇文章,简单记录了进度事件的知识点。

进度事件的种类

进度事件用来描述资源加载的进度,主要由 AJAX 请求、<img><audio><video><style><link> 等外部资源的加载触发,继承了ProgressEvent接口。它主要包含以下几种事件。

  • abort:外部资源中止加载时(比如用户取消)触发。如果发生错误导致中止,不会触发该事件
  • error:由于错误导致外部资源无法加载时触发
  • load:外部资源加载成功时触发
  • loadstart:外部资源开始加载时触发
  • loadend:外部资源停止加载时触发,发生顺序排在 errorabortload 等事件的后面
  • progress:外部资源加载过程中不断触发
  • timeout:加载超时时触发

除了资源下载,文件上传也存在这些事件。

image.addEventListener('load', function (event) {
  image.classList.add('finished');
});

image.addEventListener('error', function (event) {
  image.style.display = 'none';
});

有时候,图片加载会在脚本运行之前就完成,尤其是当脚本放置在网页底部的时候,因此有可能 loaderror 事件的监听函数根本不会执行。所以,比较可靠的方式,是用 complete 属性先判断一下是否加载完成。

function loaded() {
  // ...
}

if (image.complete) {
  loaded();
} else {
  image.addEventListener('load', loaded);
}

由于 DOM 的元素节点没有提供是否加载错误的属性,所以 error 事件的监听函数最好放在 <img> 元素的 HTML 代码中,这样才能保证发生加载错误时百分之百会执行。

<img src="/wrong/url" onerror="this.style.display='none';" />

loadend 事件的监听函数,可以用来取代 abort 事件、load 事件、error 事件的监听函数,因为它总是在这些事件之后发生。

req.addEventListener('loadend', loadEnd, false);

function loadEnd(e) {
  console.log('传输结束,成功失败未知');
}

loadend 事件本身不提供关于进度结束的原因,但可以用它来做所有加载结束场景都需要做的一些操作。

另外,error 事件有一个特殊的性质,就是不会冒泡。所以,子元素的 error 事件,不会触发父元素的 error 事件监听函数。

ProgressEvent 接口

ProgressEvent 接口主要用来描述外部资源加载的进度,比如 AJAX 加载、<img><video><style><link> 等外部资源加载。进度相关的事件都继承了这个接口。

浏览器原生提供了 ProgressEvent() 构造函数,用来生成事件实例。

new ProgressEvent(type, options);

第一个参数是字符串,表示事件的类型,这个参数是必须的。第二个参数是一个配置对象,表示事件的属性,该参数可选。配置对象除了可以使用 Event 接口的配置属性,还可以使用下面的属性,所有这些属性都是可选的。

  • lengthComputable:布尔值,表示加载的总量是否可以计算,默认是 false
  • loaded:整数,表示已经加载的量,默认是 0
  • total:整数,表示需要加载的总量,默认是0

ProgressEvent 具有对应的实例属性

  • ProgressEvent.lengthComputable
  • ProgressEvent.loaded
  • ProgressEvent.total

如果 ProgressEvent.lengthComputablefalseProgressEvent.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', updateProgress, false);
xhr.addEventListener('load', transferComplete, false);
xhr.addEventListener('error', transferFailed, false);
xhr.addEventListener('abort', transferCanceled, false);

xhr.open();

function updateProgress(e) {
  if (e.lengthComputable) {
    var percentComplete = e.loaded / e.total;
  } else {
    console.log('不能计算进度');
  }
}

function transferComplete(e) {
  console.log('传输结束');
}

function transferFailed(evt) {
  console.log('传输过程中发生错误');
}

function transferCanceled(evt) {
  console.log('用户取消了传输');
}

上面是下载过程的进度事件,还存在上传过程的进度事件。这时所有监听函数都要放在 XMLHttpRequest.upload 对象上面。

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

相关推荐

0 条评论