CODEWITHSUNDEEP
javascriptbackbone.jsrequirejspreloaderbackbone-boilerplate
Evan
Evan

Reputation: 6115

implement a visual loader bar with backbone.js application

The first time my backbone.js application loads, it will take a solid 6 seconds of a blank screen before the templates get loaded. We have a bit of javascript library bloat and the build process is not perfect yet, but these are separate issues.

I'm using backbone-boilerplate with require.js and I would like to have sort of a gmail type loader which will show up while all the assets,data,templates get loaded in and rendered so we don't have just a blank loaded page.

Is there anyway to do something like this?

Upvotes: 2

Views: 778

Answers (1)

jevakallio
jevakallio

Reputation: 35890

How I've solved this is to include an animated spinner GIF in the index.html:

<html>
  <!-- header with scripts etc -->
  <body>
    <img id="spinner" class="centered" src="/images/spinner.gif"></img>
  </body>
</html>

And when all the assets have been downloaded, models initialized and the application's main view is ready to be rendered, I simply replace the spinner with the content:

var appView = new AppView().render();
$("img#spinner").replaceWith(appView.el);

It doesn't show progress per se, but it lets the user know loading is taking place.

There might be a way to hook up to the requirejs loading events, but I'm not aware of one. If you are planning to minify and combine all the resources into a single file, this would be less useful anyway, because it's not possible to track progress of the download of a single file very accurately.

Upvotes: 4

Related Questions