页面进度条插件pace.js

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": true, "eventLag": true , "document": true}' src='./js/pace.min.js'></script>

如果你使用AMD或者Browserify来加载模块的话,你可以通过这样子来设置(例如:start):

define(['pace'], function(pace){
  pace.start({
    document: false
  });
});

Pace.js公开的API列表:

  • Pace.start:开始显示进度条,如果你不是使用AMD或者Browserify来加载模块的话,这个会默认执行。
  • Pace.restart:进度条重新加载以及显示。
  • Pace.stop:隐藏进度条以及停止加载。
  • Pace.track:监测一个或者多个请求任务。
  • Pace.ignore:忽略一个或者多个请求任务。
posted @ 2018-05-14 09:52  蓝海域的春天  阅读(1111)  评论(0编辑  收藏  举报