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

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

版本:

浏览量:77

最后更新:2021-09-11

应用标签:Jquery插件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
});

变更日志:

2021-03-03

  • v1.2.4:修复某些 Ajax 调用未完成的问题。

2020-11-16

  • v1.2.3

2019-11-10

  • 修正:破坏 XmlHTTPRequest 的类属性

2019-11-10

  • 截至日期d的操作指南文档

发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。