pace.js: "start" event not triggered?

Question

I can't seem to find a solution to this problem I posted in the comments of this question … I'm using the pace.js plugin and I would love to load/show parts of my page immediately without having to wait for the preloader to load all content.

I thought of doing this by simply calling the start event and show the selector immediately.

However I can't seem to find the cause why my done event is fired, but start is not. I also tried with hide which is also fired, but stop or restart is not.

$(window).load(function(){

    Pace.on('start', function() { 
        alert('start') // not fired
    });

    Pace.on('done', function() {
        alert('done') // fired!
    });

});

Any ideas?

Answer 1

Call Pace.start(), right after event bindings. You then will be able to get the start event.

Answer 2

You have to put

Pace.on('start', function() { 
   alert('start');
});

outside $(window).load.... After that it will get start status, You are calling These methods after documentation is loaded so start must be already triggred.

Answer 3

You will need to call

Pace.restart();

if the current page has already loaded with pace progress.

Answer 4

after registering script and css, on your htlm section add this script

    <script type="text/javascript">
        window.onbeforeunload = renderLoading;
        function renderLoading() {
            Pace.stop();
            //Pace.start();
            Pace.bar.render();
        }