这儿只是简单介绍一下这个插件pace.js.

在页面中引入Pace.js，页面就会自动监测你的请求（包括Ajax请求），在事件循环滞后，会在页面记录加载的状态以及进度情况。此插件的兼容性很好，可以兼容IE8以上的所有主流插件，而且其强大之处在于，你还可以引入加载进度条的主题样式，你可以选择任意颜色和多种动画效果（例如简约、闪光灯，MAC OSX，左侧填充，顶部填充，计数器和弹跳等等动画效果），如果你擅长修改css动画，那你就可以做出无限种可能性的动画，为你的网站增添个性化特色！

调用方法：

引入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：忽略一个或者多个请求任务。

基本上大致使用方法就这些，还有其他的一些方法的使用，各位就前往到官网去查看更加详细的介绍。希望这个插件可以帮助到大家！

更多详细的资料可以查看官网：http://github.hubspot.com/pace/

pace.js – 加载进度条插件的更多相关文章

  1. pace.js – 网页自动加载进度条插件

    网站顶部的页面加载进度条是怎么实现的,页面的加载进度百分比,有时候获取是比较麻烦的,当然也可以利用一些优秀的JavaScript插件来实现,今天就为大家介绍这样子的一款插件:pace.js. [官方网 ...

  2. ajax页面加载进度条插件

    下面两个都是youtube视频的加载进度条效果的ajax插件 一.官网:http://ricostacruz.com/nprogress/官网 github:https://github.com/rs ...

  3. jQuery网页加载进度条插件

    jquery.pace.js会自动监测你的Ajax请求,事件循环滞后,记录您的页面上准备状态和元素来决定的进度情况. 将pace.js和主题css的添加到您的网页! pace.js会自动监测你的Aja ...

  4. 【原生JS插件】LoadingBar页面顶部加载进度条

    先展示一下已经实现的效果: 预览地址:http://dtdxrk.github.io/js-plug/LoadingBar/index.html 看到手机上的浏览器内置了页面的加载进度条,想用在pc上 ...

  5. js页面加载进度条

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. 网站顶部显示预加载进度条preload.js

    网站加载的速度快的话,不会显示进度条加载时候的样式. 支持性主流浏览器都支持,ie浏览器需要9以上9也支持. 使用方法 <script src="http://code.jquery. ...

  7. iOS UIWebView 加载进度条的使用-WKWebView的使用，更新2017.6.26

    1.由于项目中加载网络插件,直接使用了webview加载.使用了三方NJKWebViewProgress进度条的使用,近期在测试时发现,网络缓慢时出现白屏,有卡顿现象. 于是采用了WKWebView进 ...

  8. 用document.readyState实现网页加载进度条

    概述 之前以为给网页设置加载进度条很麻烦,今天一学真是超级简单,记录下来供以后开发时参考,相信对其他人也有用. readyState 主要运用了document.readyState和nprogres ...

  9. 【Web前沿技术】纯 CSS3 打造的10个精美加载进度条动画

    之前向大家介绍8款优秀的 jQuery 加载动画和进度条插件,今天这篇文章向大家推荐10个纯 CSS3 代码实现精美加载进度条动画效果的方案.加载动画和进度条在网站和 Web 应用中的使用非常流行,特 ...

随机推荐

  1. php中的常用数组函数（一）（比较多个数组的差集的函数们 array_diff_assoc() array_diff() array_diff_key() array_diff_ukey() array_diff_uassoc()）

    array_diff_assoc($arr1, $arr2, $arr3,... n); 返回:一个$arr1的副本,后续的数组中出现一个键值相同的元素,就在副本中删掉这个元素,最后返回这个副本. 如 ...

  2. 四、MyBatis主配置文件

    //备注:该博客引自:http://limingnihao.iteye.com/blog/1060764 在定义sqlSessionFactory时需要指定MyBatis主配置文件: Xml代码 收藏 ...

  3. Jquery_Ajax GET方式传递文本

    第一个网页: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www. ...

  4. mysql root强密码的必要性max_allowed_packet被改成1024引起的风险

    前两天运维反馈说,有些机器的max_allowed_packet隔两天就会被改成1024,导致客户端调用时出错,网上有说内存不够的,也有人工修改的. 运维小姑娘一口咬定肯定没有改过的,而且my.cnf ...

  5. .NET破解之google瓦片下载及拼接

    由于最近一些其他事忙,加之电脑显卡坏了,所以,好长一段时间没有更新博客了,感觉对不注关注我的朋友.从本文开始,博客更新频率将会大大降低,但每周都会更新的. 在上帝之眼论坛看到了新出来了一个google ...

  6. Android 网络编程基础之简单聊天程序

    前一篇讲了Android的网络编程基础,今天写了一个简单的聊天程序分享一下 首先是服务端代码: package com.jiao.socketdemo; import java.io.Buffered ...

  7. 快捷下载 sourceForge下的资源

    一些开源项目通常会放在  sourceforge.net下面发布.然而,这个网站有时候出现卡顿,并且需要点击几次页面才能下载到自己想要的资源. 这里有个好办法,一步列出所有可下载的资源:        ...

  8. 别了，CL君

    去年是我毕业的第3年,去年一年里没有上班,本打算重拾青春校园的纯粹记忆,当时想过考研.在西电租房子住了3个月后就打道回府了.回北郊后,住在毛坯房子里,一个人睡觉倒也不觉得黑,也不觉得害怕. 后来201 ...

  9. ASP.NET 使用Ajax(转)

    之前在Ajax初步理解中介绍了对Ajax的初步理解,本文将介绍在ASP.NET中如何方便使用Ajax,第一种当然是使用jQuery的ajax,功能强大而且操作简单方便,第二种是使用.NET封装好的Sc ...

  10. 【原创】大众点评监控平台cat的性能分析

    由于工作的原因,或者说我们之前内部监控设计和实现有点不满足现有的研发需求,所以调研了一下大众点评开源出来的cat这一套监控系统. 今天我们就来实验一把,cat的客户端埋点在我们的程序流程中上报数据到c ...