Pace.js page Load progress bar plugin _javascript Tips

This article briefly introduces the plug-in Pace.js.

By introducing pace.js into the page, the page will automatically monitor your request (including AJAX requests) and, in the event loop lag, record the loading status and progress on the page. The compatibility of this plugin is very good, can be compatible with all the major plug-ins IE8 above, and its powerful is that you can also introduce the load progress bar theme style, you can choose any color and a variety of animation effects (such as simplicity, Flash, MAC OS X, left padding, top fill, counters and bounce, etc. animation effects) , if you are good at modifying CSS animations, you can make an unlimited number of possibilities of animation, for your site to add personalized features!

Call Method:

The introduction of Pace.js and theme files can be:

Custom configuration:

Pace.js is automatically loaded into the page and does not need to be attached to any code to automatically detect progress. If you want to make some adjustments, you can set window.paceoptions to customize the configuration:

Paceoptions = {
 //Disable the ' elements ' source
 Elements:false,
 //Only show the progress on regular and Aja X-y page navigation,
 //Not every request
 Restartonrequestafter:false
}

You can also place your customizations in the Script tab, for example:

<script data-pace-options= ' {ajax ': false} ' src= ' Pace.js ' ></script>

If you use AMD or browserify to load modules, you can set this up (for example: start):

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

Using the API:

List of APIs exposed by Pace.js:

Pace.start: Start showing the progress bar, if you are not using AMD or Browserify to load the module, this will be done by default.

Pace.restart: The progress bar reloads and displays.

Pace.stop: Hides the progress bar and stops loading.

Pace.track: Monitor One or more request tasks.

Pace.ignore: Ignores one or more request tasks.

Basically the way to use these, there are some other methods of use, you go to the official website to see more detailed introduction. Hope this plugin can help everyone!