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?

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?

• javascript
• jquery
• jquery-events
• preload
• pace.js

4 Answers 4

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

You will need to call

Pace.restart();

if the current page has already loaded with pace progress.

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.

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();
        }