PACE JS - Page Load Only

Question

I am using this plugin, Page.JS - http://github.hubspot.com/pace/ - to make a progress bar on the site.

I’m calling it that:

<script src='js/vendor/pace.min.js' data-pace-options='{ "elements": false, "startOnPageLoad": true, "restartOnRequestAfter": false }'></script>

It is working partially. When I enter the page loads the progress bar.

The problem is that this is happening in every request. As it is a Single Page my site, I have a script that when scrolling the screen changes the URL. For example, I have a MENU like this:

Home
Contact
Products

And as you roll into a certain session, you do localhost/pagina#home, localhost/pagina#contatoand so it goes.

And when I scroll the page keeps showing the progress bar.

I’m not understanding how this plugin works.

Answer 1

For default, this plugin adds the progress bar for all jQuery events, if you only need it in the page load event, you can keep the "startOnPageLoad": true and add the "ajax": false who had avoided displaying each request. Thus:

<script src='js/vendor/pace.min.js' data-pace-options='{ "elements": false, "startOnPageLoad": true, "ajax": false, "restartOnRequestAfter": false }'></script>

Answer 2

You can try adding the ignoreURLs in options:

Pace.options = {
  ajax: {
    ignoreURLs: ['some-substring', /some-regexp/]
  }
}