pace.js页面加载进度条插件


Posted in Javascript onSeptember 29, 2015

本文简单介绍插件pace.js.

在页面中引入Pace.js,页面就会自动监测你的请求(包括Ajax请求),在事件循环滞后,会在页面记录加载的状态以及进度情况。此插件的兼容性很好,可以兼容IE8以上的所有主流插件,而且其强大之处在于,你还可以引入加载进度条的主题样式,你可以选择任意颜色和多种动画效果(例如简约、闪光灯,MAC OSX,左侧填充,顶部填充,计数器和弹跳等等动画效果),如果你擅长修改css动画,那你就可以做出无限种可能性的动画,为你的网站增添个性化特色!

pace.js页面加载进度条插件

调用方法:

引入Pace.js以及主题文件即可:

<head>
 <script src="/pace/pace.js"></script>
 <link href="/pace/themes/pace-theme-barber-shop.css" rel="stylesheet" />
</head>

自定义配置:

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

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

你也可以将自定义设置放到script标签内,例如:

<script data-pace-options='{ "ajax": false }' src='pace.js'></script>

如果你使用AMD或者Browserify来加载模块的话,你可以通过这样子来设置(例如:start):

define(['pace'], function(pace){
 pace.start({
  document: false
 });
});

使用API:

Pace.js公开的API列表:

Pace.start:开始显示进度条,如果你不是使用AMD或者Browserify来加载模块的话,这个会默认执行。

Pace.restart:进度条重新加载以及显示。

Pace.stop:隐藏进度条以及停止加载。

Pace.track:监测一个或者多个请求任务。

Pace.ignore:忽略一个或者多个请求任务。

基本上大致使用方法就这些,还有其他的一些方法的使用,各位就前往到官网去查看更加详细的介绍。希望这个插件可以帮助到大家!

Javascript 相关文章推荐
JS分割字符串并放入数组的函数
Jul 04 Javascript
JavaScript极简入门教程(三):数组
Oct 25 Javascript
JavaScript中的console.trace()函数介绍
Dec 29 Javascript
原生js仿jquery animate动画效果
Jul 13 Javascript
Angular 表单控件示例代码
Jun 26 Javascript
jQuery实现动态添加节点与遍历节点功能示例
Nov 09 jQuery
微信小程序如何获取openid及用户信息
Jan 26 Javascript
JavaScript 五大常见函数
Mar 23 Javascript
Vue 使用 Mint UI 实现左滑删除效果CellSwipe
Apr 27 Javascript
浅谈React之状态(State)
Sep 19 Javascript
纯js+css实现在线时钟
Aug 18 Javascript
JavaScript setTimeout()基本用法有哪些
Nov 04 Javascript
js强制把网址设为默认首页
Sep 29 #Javascript
jQuery EasyUI Dialog拖不下来如何解决
Sep 28 #Javascript
JQuery实现左右滚动菜单特效
Sep 28 #Javascript
JS动态日期时间的获取方法
Sep 28 #Javascript
js电话号码验证方法
Sep 28 #Javascript
JavaScript多图片上传案例
Sep 28 #Javascript
JavaScript判断FileUpload控件上传文件类型
Sep 28 #Javascript
You might like
php调用mysql数据 dbclass类
2011/05/07 PHP
php中防止SQL注入的最佳解决方法
2013/04/25 PHP
通过实例解析PHP数据类型转换方法
2020/07/11 PHP
使用prototype.js 的时候应该特别注意的几个问题.
2007/04/12 Javascript
jquery 插件 web2.0分格的分页脚本,可用于ajax无刷新分页
2008/12/25 Javascript
十个优秀的Ajax/Javascript实例网站收集
2010/03/31 Javascript
js自动生成对象的属性示例代码
2013/10/28 Javascript
jQuery移除tr无效的解决方法(tr是动态添加)
2014/09/22 Javascript
JavaScript中的全局对象介绍
2015/01/01 Javascript
基于javascript实现样式清新图片轮播特效
2016/03/30 Javascript
JS仿百度自动下拉框模糊匹配提示
2016/07/25 Javascript
微信小程序 Image API实例详解
2016/09/30 Javascript
网络传输协议(http协议)
2016/11/18 Javascript
实现JavaScript高性能的数据存储
2016/12/11 Javascript
详解在Angularjs中ui-sref和$state.go如何传递参数
2017/04/24 Javascript
JavaScript实现隐藏省略文字效果的方法
2017/04/27 Javascript
vue 中filter的多种用法
2018/04/26 Javascript
vue 根据数组中某一项的值进行排序的方法
2018/08/30 Javascript
TypeScript 引用资源文件后提示找不到的异常处理技巧
2020/07/15 Javascript
python3.4下django集成使用xadmin后台的方法
2017/08/15 Python
详解Django+Uwsgi+Nginx的生产环境部署
2018/06/25 Python
python代码过长的换行方法
2018/07/19 Python
python3利用venv配置虚拟环境及过程中的小问题小结
2018/08/01 Python
Python时间序列处理之ARIMA模型的使用讲解
2019/04/02 Python
解决python 读取 log日志的编码问题
2019/12/24 Python
Tensorflow 多线程与多进程数据加载实例
2020/02/05 Python
在django项目中导出数据到excel文件并实现下载的功能
2020/03/13 Python
Python实现简单猜数字游戏
2021/02/03 Python
爱尔兰旅游网站:ebookers.ie
2020/01/24 全球购物
简述安装Slackware Linux系统的过程
2012/05/08 面试题
营销与策划应届生求职信
2013/11/04 职场文书
教师推荐信范文
2013/11/24 职场文书
最新大学职业规划书范文
2013/12/30 职场文书
水电工岗位职责
2014/02/12 职场文书
纪念一二九运动演讲稿
2014/09/16 职场文书
2016自主招生校长推荐信范文
2015/03/23 职场文书