自动页面加载和 Ajax 请求进度条 - Pace.js

版本:

浏览量:1058

最后更新：2021-09-11

应用标签：Jquery插件 git MAC 软件

推荐指数:

查看演示点击下载

详细信息

Pace.js 是一个轻量级（约 4kb 压缩和 gzipped）和独立的 JavaScript 库，用于为您的页面加载和 ajax 请求创建漂亮的进度指示器。

它会自动监控 AJAX 请求、事件循环延迟、文档就绪状态和页面上的元素以决定进度。在 ajax 导航上，它将再次开始。

Pace.js 目前有 15 个主题和 10 个颜色变量。

最小
闪光
理发店
Mac OSX
向左填充
平顶
大柜台
角指示器
弹跳
加载条
中心原子
中心圆
中心原子
中心雷达
中心简单
10 个颜色变量：黑色、蓝色、绿色、橙色、粉色、紫色、红色、银色、白色和黄色。

也可以看看：

Google Like jQuery Slim Progress Bar Plugin - NProgress
jQuery Youtube Like Ajax Progress Bar Plugin - ytLoad
jQuery Slim 预加载栏插件 - Loadie.js
10 个最佳进度条（线性）组件

基本用法：

1. 在 HTML 文档中包含 Pace.js 脚本。

<script src="/pace/pace.js"></script>

2. 在文档中包含您选择的主题 css。

<link href="/themes/COLOR/pace-theme-barber-shop.css" rel="stylesheet" />
<link href="/themes/COLOR/pace-theme-big-counter.css" rel="stylesheet" />
<link href="/themes/COLOR/pace-theme-bounce.css" rel="stylesheet" />
<link href="/themes/COLOR/pace-theme-center-atom.css" rel="stylesheet" />
<link href="/themes/COLOR/pace-theme-center-circle.css" rel="stylesheet" />
<link href="/themes/COLOR/pace-theme-center-radar.css" rel="stylesheet" />
<link href="/themes/COLOR/pace-theme-center-simple.css" rel="stylesheet" />
<link href="/themes/COLOR/pace-theme-corner-indicator.css" rel="stylesheet" />
<link href="/themes/COLOR/pace-theme-fill-left.css" rel="stylesheet" />
<link href="/themes/COLOR/pace-theme-flash.css" rel="stylesheet" />
<link href="/themes/COLOR/pace-theme-flat-top.css" rel="stylesheet" />
<link href="/themes/COLOR/pace-theme-loading-bar.css" rel="stylesheet" />
<link href="/themes/COLOR/pace-theme-mac-osx.css" rel="stylesheet" />
<link href="/themes/COLOR/pace-theme-material.css" rel="stylesheet" />
<link href="/themes/COLOR/pace-theme-minimal.css" rel="stylesheet" />

3. 就是这样。该库将自动监视 AJAX 请求并在页面加载时生成进度指示器。要自定义插件，只需覆盖下面显示的默认参数：

paceOptions = {
  catchupTime: 100,
  initialRate: .03,
  minTime: 250,
  ghostTime: 100,
  maxProgressPerFrame: 20,
  easeFactor: 1.25,
  startOnPageLoad: true,
  restartOnPushState: true,
  restartOnRequestAfter: 500,
  target: 'body',
  elements: {
    checkInterval: 100,
    selectors: ['body']
  },
  eventLag: {
    minSamples: 10,
    sampleCount: 3,
    lagThreshold: 3
  },
  ajax: {
    trackMethods: ['GET'],
    trackWebSockets: true,
    ignoreURLs: []
  }
}

4. API 方法。

// start the progress bar
Pace.start();
 
// restart the progress bar
Pace.restart();
 
// stop the progress bar
Pace.stop();
 
// explicitly track one or more requests
Pace.track();
 
// expliticly ignore one or more requests
Pace.ignore();

5. 事件处理程序。

// trigger the event
Pace.on(event, handler, [context]);
 
// unbind the event
Pace.off(event, [handler]);
 
// trigger the event only once
Pace.once(event, handler, [context]);
 
Pace.on(start, function(){
  // do something
});
 
Pace.on(stop, function(){
  // do something
});
 
Pace.on(restart, function(){
  // do something
});
 
Pace.on(done, function(){
  // do something
});
 
Pace.on(start, function(){
  // do something
});