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 相关文章推荐
鼠标经过的文本框textbox变色
May 21 Javascript
学习面向对象之面向对象的基本概念:对象和其他基本要素
Nov 30 Javascript
jQuery的live()方法对hover事件的处理示例
Feb 27 Javascript
JavaScript制作简易的微信打飞机
Mar 31 Javascript
javaScript中Math()函数注意事项
Jun 18 Javascript
javascript加减乘除的简单实例
Jul 12 Javascript
JavaScript正则表达式exec/g实现多次循环用法示例
Jan 17 Javascript
微信网页授权并获取用户信息的方法
Jul 30 Javascript
create-react-app安装出错问题解决方法
Sep 04 Javascript
JavaScript编写开发动态时钟
Jul 29 Javascript
创建与框架无关的JavaScript插件
Dec 01 Javascript
使用Typescript开发微信小程序的步骤详解
Jan 12 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中$美元符号与Zen Coding冲突问题解决方法分享
2014/05/28 PHP
php中使用in_array() foreach array_search() 查找数组是否包含时的性能对比
2015/04/14 PHP
PHP中iconv函数知识汇总
2015/07/02 PHP
PHP中利用sleep函数实现定时执行功能实现代码
2016/08/25 PHP
我的javascript 函数链之演变
2011/04/07 Javascript
读jQuery之六 缓存数据功能介绍
2011/06/21 Javascript
Extjs中使用extend(js继承) 的代码
2012/03/15 Javascript
js生成动态表格并为每个单元格添加单击事件的方法
2014/04/14 Javascript
javascript背景时钟实现方法
2015/06/18 Javascript
使用jQuery获取data-的自定义属性
2015/11/10 Javascript
利用canvas实现的加载动画效果实例代码
2017/07/05 Javascript
详解vue-cli快速构建vue应用并实现webpack打包
2017/12/13 Javascript
jQuery实现鼠标滑过商品小图片上显示对应大图片功能【测试可用】
2018/04/27 jQuery
Vue中 v-if/v-show/插值表达式导致闪现的原因及解决办法
2018/10/12 Javascript
vue-router结合vuex实现用户权限控制功能
2019/11/14 Javascript
javascript设计模式 ? 代理模式原理与用法实例分析
2020/04/16 Javascript
[01:02]DOTA2辉夜杯决赛日 CDEC.Y对阵VG赛前花絮
2015/12/27 DOTA
Python中使用logging模块打印log日志详解
2015/04/05 Python
Python3里的super()和__class__使用介绍
2015/04/23 Python
深入解析Python中的list列表及其切片和迭代操作
2016/03/13 Python
Python中的复制操作及copy模块中的浅拷贝与深拷贝方法
2016/07/02 Python
Ubuntu+python将nii图像保存成png格式
2019/07/18 Python
pytorch dataloader 取batch_size时候出现bug的解决方式
2020/02/20 Python
pycharm-professional-2020.1下载与激活的教程
2020/09/21 Python
印尼最大的在线购物网站:MatahariMall.com
2016/08/26 全球购物
Derek Rose官网:英国高档睡衣、家居服和内衣品牌
2020/01/18 全球购物
一个SQL面试题
2014/08/21 面试题
编辑找工作求职信范文
2013/12/16 职场文书
公务员培训心得体会
2013/12/28 职场文书
政府信息公开实施方案
2014/05/09 职场文书
机械专业求职信
2014/05/25 职场文书
2015毕业生自我评价范文
2015/03/02 职场文书
2015年大学生社会实践评语
2015/03/26 职场文书
保险公司反洗钱宣传活动总结
2015/05/08 职场文书
遗失证明范文
2015/06/19 职场文书
运动会开幕式主持词
2015/07/01 职场文书