search

Home >Web Front-end >JS Tutorial >pace.js page loading progress bar plug-in_javascript skills

pace.js page loading progress bar plug-in_javascript skills

WBOY
WBOYOriginal
2016-05-16 15:37:381368browse

This article briefly introduces the plugin pace.js.

Introduce Pace.js into the page, and the page will automatically monitor your requests (including Ajax requests). When the event loop lags, the loading status and progress will be recorded on the page. This plug-in has good compatibility and is compatible with all mainstream plug-ins above IE8. What’s more, its power is that you can also introduce the theme style of the loading progress bar. You can choose any color and multiple animation effects (such as simplicity, flash , MAC OSX, left padding, top padding, counter and bounce, etc. animation effects), if you are good at modifying CSS animations, then you can make unlimited possibilities of animations to add personalized features to your website!

Calling method:

Introduce Pace.js and theme files: 

<head>
 <script src="/pace/pace.js"></script>
 <link href="/pace/themes/pace-theme-barber-shop.css" rel="stylesheet" />
</head>

Custom configuration:

Pace.js will be automatically loaded into the page. It does not need to be hooked to any code and will automatically detect the 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 ajax-y page navigation,
 // not every request
 restartOnRequestAfter: false
}

You can also put custom settings in script tags, for example: 

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

If you use AMD or Browserify to load modules, you can set it like this (for example: start): 

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

Use API:

Pace.js public API list:

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

Pace.restart: The progress bar is reloaded and displayed.

Pace.stop: Hide the progress bar and stop loading.

Pace.track: Monitor one or more request tasks.

Pace.ignore: Ignore one or more request tasks.

Basically, these are the general usage methods, and there are other methods. Please go to the official website to view a more detailed introduction. I hope this plug-in can help everyone!

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Web page passes the value from the pop-up page radio button to the parent page code sharing_javascript skillsNext article：Web page passes the value from the pop-up page radio button to the parent page code sharing_javascript skills

Related articles

See more