Only use pace.js on first page (initial site load)

Question

Using the plugin pace.js (http://github.hubspot.com/pace/), I wish only to use it to preload the first page of a site. Been looking through the options but there doesn't seem to be a built-in way to do this, but only toggling pushstate and ajax preloads.

Also, for some reason the preloader bar ends about 50% of its width when preloading a page. This probably has to do with the site being run locally, although I use multiple external elements and images. Anyone else experiencing this?

Answer 1

here is my way of doing it. you may put in how you implemented that.

<script> $(window).load(function(e){ $('div.loading-page').fadeOut('slow'); }); </script>
<div class="loading-page"></div>

css:

.loading-page{
    position:fixed;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background:white;
    z-index:1999; /* as pace has 2000 */
}

Answer 2

If for some reason you wanted to do this with pace.js, you can take advantage of classes and just add a class to the body element after the page has been completely loaded.

$(window).load(function() {
    setTimeout(function() {
        $('body').addClass('loaded');
    }, 1000);
});

Then you can just hide pace with CSS if its inside body.loaded

body.loaded .pace {
  display: none;
}

Of course, it doesn't really make sense to use pace for this if you only want to show it once, but using this technique you can easily have different styles and/or animations for initial VS. secondary loading