前端开发：JavaScript 进度条状态（二）

此文为大家推荐一些实用的进度条状态，希望对大家在以后的前端开发过程中，有所帮助！

1、NProgress（在 Ajax’y 应用显示细长型进度条）

2、progress.js（为页面任何对象创建和管理进度条）

3、progressbar.js（用 SVG path 动画制作的、漂亮和响应式的进度条）

4、nanobar（非常轻量的进度条。不依赖 jQuery）

5、PageLoadingEffects（使用 SVG 动画展现新内容的现代方式）

6、css-loaders（运用 CSS 动画的旋转加载指示器的集合）

切版 qieban(.cn)

JavaScript事件中进度事件教程

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

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

functionloadEnd(e){

console.log(\'传输结束，成功失败未知\');

}

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

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

2、ProgressEvent接口

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

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

newProgressEvent(type,options)

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

lengthComputable：布尔值，表示加载的总量是否可以计算，默认是false。

loaded：整数，表示已经加载的量，默认是0。

total：整数，表示需要加载的总量，默认是0。

ProgressEvent具有对应的实例属性。

ProgressEvent.lengthComputable

ProgressEvent.loaded

ProgressEvent.total

如果ProgressEvent.lengthComputable为false，ProgressEvent.total实际上是没有意义的。

下面是一个例子。

varp=newProgressEvent(\'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%

上面代码先构造一个load事件，抛出后被监听函数捕捉到。

下面是一个实际的例子。

varxhr=newXMLHttpRequest();

xhr.addEventListener(\'progress\',updateProgress,false);

xhr.addEventListener(\'load\',transferComplete,false);

xhr.addEventListener(\'error\',transferFailed,false);

xhr.addEventListener(\'abort\',transferCanceled,false);

xhr.open();

functionupdateProgress(e){

if(e.lengthComputable){

varpercentComplete=e.loaded/e.total;

}else{

console.log(\'不能计算进度\');

}

}

functiontransferComplete(e){

console.log(\'传输结束\');

}

functiontransferFailed(evt){

console.log(\'传输过程中发生错误\');

}

functiontransferCanceled(evt){

console.log(\'用户取消了传输\');

}

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

varxhr=newXMLHttpRequest();

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