前端库：js页面加载进度条

小渣渣

先上效果图吧：

简单的使用方法：

第一步：拷贝templates文件夹、themes文件夹、pace.js、pace.min.js拷贝到项目中

第二步：引入css样式和js脚本

1. <div><link href="/Content/pace/themes/pace-theme-center-atom.css" rel="stylesheet" /></div><div><scrip{过滤}t src="/Content/pace/pace.min.js"></scrip{过滤}t></div>

复制代码

第三步：打开页面，完成


自定义配置

Pace.js会自动加载到页面中，不需要挂接到任何代码，会自动检测进度。如果你想做一些调整，你可以设置window.paceOptions来自定义配置：

1. <div> paceOptions = {</div><div>  // Disable the 'elements' source</div><div>  elements: false,</div><div>  </div><div>  // Only show the progress on regular and ajax-y page navigation,</div><div>  // not every request</div><div>  restartOnRequestAfter: false</div><div>  }</div>

复制代码

你也可以将自定义设置放到scrip{过滤}t标签内，例如：

1. <scrip{过滤}t data-pace-options='{ "ajax": false }' src='pace.js'></scrip{过滤}t>

复制代码

如果你使用AMD或者Browserify来加载模块的话，你可以通过这样子来设置（例如：start）：

1. <div>define(['pace'], function(pace){</div><div>  pace.start({</div><div>    document: false</div><div>  });</div><div>});</div><div></div>

复制代码

使用API

Pace.js公开的API列表：

Pace.start：开始显示进度条，如果你不是使用AMD或者Browserify来加载模块的话，这个会默认执行。
Pace.restart：进度条重新加载以及显示。
Pace.stop：隐藏进度条以及停止加载。
Pace.track：监测一个或者多个请求任务。
Pace.ignore：忽略一个或者多个请求任务。


文件下载： pace-0.5.6.zip (153.26 KB, 下载次数: 2)

2016-1-18 11:02 上传

点击文件名下载附件