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 相关文章推荐
jQuery 计算iframe 窗口大小的方法
May 13 Javascript
js实现刷新iframe的方法汇总
Apr 27 Javascript
分享十五款 jQuery 社交网络分享插件
May 16 Javascript
JavaScript实现节点的删除与序号重建实例
Aug 05 Javascript
Jquery ajax请求导出Excel表格的实现代码
Jun 08 Javascript
从重置input file标签中看jQuery的 .val() 和 .attr(“value”) 区别
Jun 12 Javascript
输入框点击时边框变色效果的实现方法
Dec 26 Javascript
ES6入门教程之Class和Module详解
May 17 Javascript
vue几个常用跨域处理方式介绍
Feb 07 Javascript
Vue的H5页面唤起支付宝支付功能
Apr 18 Javascript
Vue父组件如何获取子组件中的变量
Jul 24 Javascript
vue各种事件监听实例(小结)
Jun 24 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
Drupal读取Excel并导入数据库实例
2014/03/02 PHP
解读PHP的Yii框架中请求与响应的处理流程
2016/03/17 PHP
php及codeigniter使用session-cookie的方法(详解)
2017/04/06 PHP
php通过pecl方式安装扩展的实例讲解
2018/02/02 PHP
thinkphp5引入公共部分header、footer的方法详解
2018/09/14 PHP
TimergliderJS 一个基于jQuery的时间轴插件
2011/12/07 Javascript
CSS+jQuery实现的一个放大缩小动画效果
2013/09/24 Javascript
javascript瀑布流式图片懒加载实例解析与优化
2016/02/23 Javascript
JavaScript设计模式之单体模式全面解析
2016/09/09 Javascript
JavaScript运动框架 多值运动(四)
2017/05/18 Javascript
Vue2.0用 watch 观察 prop 变化(不触发)
2017/09/08 Javascript
javascript显示动态时间的方法汇总
2018/07/06 Javascript
详解如何在Node.js的httpServer中接收前端发送的arraybuffer数据
2018/11/11 Javascript
微信小程序服务器日期格式化问题
2020/01/07 Javascript
vant-ui框架的一个bug(解决切换后onload不触发)
2020/11/11 Javascript
[55:47]DOTA2上海特级锦标赛C组小组赛#2 LGD VS Newbee第三局
2016/02/27 DOTA
[01:19:33]DOTA2-DPC中国联赛 正赛 iG vs VG BO3 第一场 2月2日
2021/03/11 DOTA
python获取当前时间对应unix时间戳的方法
2015/05/15 Python
Python用imghdr模块识别图片格式实例解析
2018/01/11 Python
Python3随机漫步生成数据并绘制
2018/08/27 Python
通过Python编写一个简单登录功能过程解析
2019/09/04 Python
Python使用tkinter模块实现推箱子游戏
2019/10/08 Python
python中uuid模块实例浅析
2020/12/29 Python
利用CSS3实现毛玻璃效果示例源码
2016/09/25 HTML / CSS
美国伊甸园兄弟种子公司:Eden Brothers
2018/07/01 全球购物
Stutterheim瑞典:瑞典高级外套时装品牌
2019/06/24 全球购物
英国DIY和家居装饰领域的主要品牌:Wickes
2019/11/26 全球购物
如何设置Java的运行环境
2013/04/05 面试题
工业学校毕业生自荐信范文
2014/01/03 职场文书
人力资源管理求职信
2014/08/07 职场文书
开票证明
2015/06/23 职场文书
升学宴祝酒词
2015/08/11 职场文书
假如给我三天光明:舟逆水而行,人遇挫而达 
2019/10/29 职场文书
Python 快速验证代理IP是否有效的方法实现
2021/07/15 Python
Java 超详细讲解数据结构中的堆的应用
2022/04/02 Java/Android
使用CSS实现音波加载效果
2023/05/07 HTML / CSS