Exclude elements from being preloaded

Question

I use http://github.hubspot.com/pace/ on a current project which preloads the entire page.

Is it possible to exclude certain elements from preloading?

E.g. I want my #header and #banner element to be visible right away, and let pace do its job for the rest of the page.

For me the "start" event is not triggered?

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

Wheter in the document-ready nor out of the function. Pace.on("done", … triggers just fine.

Update: my major problem at the moment is this …

$(window).load(function(){
    $('body').addClass("page");

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

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

Answer 1

According with the documentation:

"Collectors are the bits of code which gather progress information. Pace includes four default collectors:

Ajax

Monitors all ajax requests on the page

Elements

Checks for the existance of specific elements on the page

Document

Checks the document readyState

Event Lag

Checks for event loop lag signaling that javascript is being executed

They can each be configured or disabled through configuration options of the same name."

paceOptions = {
  ajax: false, // disabled
  document: false, // disabled
  eventLag: false, // disabled
  elements: {
    selectors: ['.my-page']
  }
};

Perhaps

elements: {
   selectors: ['.my-page']
}

Could do the trick.

More here:

"Elements

Elements being rendered to the screen is one way for us to decide that the page has been rendered. If you would like to use that source of information (not required at all), specify one or more selectors. You can comma seperate the selectors to propertly handle error states, where the progress bar should disappear, but the element we are looking for may never appear:"

paceOptions = {
  elements: {
    selectors: ['.timeline,.timeline-error', '.user-profile,.profile-error']
  }
}

It seems a good plugin!

---

EDIT

To attach code on start it seems that should be:

"If you're using AMD or Browserify, you can pass your options to start:"

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