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 相关文章推荐
iframe 自适应高度[在IE6 IE7 FF下测试通过]
Apr 13 Javascript
jQuery移除tr无效的解决方法(tr是动态添加)
Sep 22 Javascript
将JavaScript的jQuery库中表单转化为JSON对象的方法
Nov 17 Javascript
轻松实现jquery手风琴效果
Jan 14 Javascript
Bootstrap源码解读网格系统(3)
Dec 22 Javascript
React中使用collections时key的重要性详解
Aug 07 Javascript
jQuery基于Ajax实现读取XML数据功能示例
May 31 jQuery
详解使用VueJS开发项目中的兼容问题
Aug 02 Javascript
ES6 Iterator接口和for...of循环用法分析
Jul 31 Javascript
Angular6使用forRoot() 注册单一实例服务问题
Aug 27 Javascript
js实现漂亮的星空背景
Nov 01 Javascript
js前端对于大量数据的展示方式及处理方法
Dec 02 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获取MAC地址的函数代码
2011/09/11 PHP
PHP SPL标准库之SplFixedArray使用实例
2015/05/12 PHP
Yii2框架引用bootstrap中日期插件yii2-date-picker的方法
2016/01/09 PHP
Linux php 中文乱码的快速解决方法
2016/05/13 PHP
Netbeans 8.2与PHP相关的新特性介绍
2016/10/08 PHP
PHP实现Google plus的好友拖拽分组效果
2016/10/21 PHP
php使用curl代理实现抓取数据的方法
2017/02/03 PHP
YII框架关联查询操作示例
2019/04/29 PHP
PHP命名空间用法实例分析
2019/09/04 PHP
PHP pthreads v3下的Volatile简介与使用方法示例
2020/02/21 PHP
手机平板等移动端适配跳转URL的js代码
2014/01/25 Javascript
JavaScript中Null与Undefined的区别解析
2015/06/30 Javascript
JavaScript获取图片像素颜色并转换为box-shadow显示
2016/03/11 Javascript
js实现当鼠标移到表格上时显示这一格全部内容的代码
2016/06/12 Javascript
Jquery根据浏览器窗口改变调整大小的方法
2017/02/07 Javascript
Vue.js实现多条件筛选、搜索、排序及分页的表格功能
2020/11/24 Javascript
vue的事件绑定与方法详解
2017/08/16 Javascript
利用Vue2.x开发实现JSON树的方法
2018/01/04 Javascript
JS实现左边列表移到到右边列表功能
2018/03/28 Javascript
三步搞定:Vue.js调用Android原生操作
2020/09/07 Javascript
python将字符串以utf-8格式保存在txt文件中的方法
2018/10/30 Python
Pandas过滤dataframe中包含特定字符串的数据方法
2018/11/07 Python
python模拟菜刀反弹shell绕过限制【推荐】
2019/06/25 Python
python中导入 train_test_split提示错误的解决
2020/06/19 Python
Python 实现集合Set的示例
2020/12/21 Python
法国时尚品牌乐都特瑞士站:La Redoute瑞士
2016/09/05 全球购物
去加拿大的旅行和假期:Canadian Affair
2016/10/25 全球购物
Veronica Beard官网:在酷、经典和别致之间找到了平衡
2018/01/11 全球购物
慕尼黑山地运动、户外服装和体育用品专家:Sporthaus Schuster
2019/08/27 全球购物
运动会开幕式主持词
2014/03/28 职场文书
教师见习期自我鉴定
2014/04/28 职场文书
本科生就业推荐信
2014/05/19 职场文书
合伙购房协议样本
2014/10/06 职场文书
银行客户经理岗位职责
2015/04/09 职场文书
2016简历自荐信优秀范文
2016/01/29 职场文书
测量JavaScript函数的性能各种方式对比
2021/04/27 Javascript