Add a preloader to your Wakanda application

Hello everyone,

While working with heavy Wakanda applications i wanted to add a preloader gif to make the user waits knowing there that the application is loading instead of having a blank page without being aware that the body is simply just hidden.

So i isolated a bit of code to make a small library preloader.js.

You’ll need the file, which can be found here

To make it works,

  • Add it somewhere in your project (for example in a scripts folder at the root of your WebFolder).
  • Add an image to act for the preloading image somewhere in your project (for example in an images folder at the root of your WebFolder)
  • Edit your html file to be preloaded, and add
    <script type="text/javascript" src="<location_To_Preloader.js>"></script>

    before the script tag which add the Loader.js file.

  • Make sure “preloader.js” is targeting the image you want to display as a preloader.

You’re done. Now try your webpage. You may find that sometimes, the other contents are visible for a microsecond, I’m looking on how to fix this, but basically you can start with this solution to display a nice preloading image for your users.

So for Wakanda studio users,

Just place the preloader.js file somewhere in your WebFolder and manually edit your webpage by switching to the source mode

Screenshot 2013-02-05 at 09.58.05

And add the script before the Loader script.

Screenshot 2013-02-05 at 09.58.24
Also make sure that the preloader.js finds the image file used as the preloading. By default the image is looked at the location “/images/loader.gif”. Just edit the preloader.js file to change this location.

So for me here is the structure of my WebFolder

Screenshot 2013-02-05 at 10.01.09

Feel free to comment, and to enhance the code to fit your needs.

Cheers.

Advertisements

Tagged: ,

2 thoughts on “Add a preloader to your Wakanda application

  1. Oky March 29, 2013 at 6:58 am Reply

    Hi there,
    Is the preloader.js only 34 lines of code?
    If yes, then I didn’t see the line where you mention the location of preloader.gif.

    Thanks

  2. choisel March 30, 2013 at 10:39 am Reply

    Hello Oky,

    I changed a bit the behavior of the preloader.
    You now have to add this in your application.css file

    Code:
    #hackanda_preloader {
    background-image: url(‘data:image/gif;base64,DATA_OF_YOUR_IMAGE);
    }

    replace DATA_OF_YOUR_IMAGE by the encoding of your image.
    To get this string go to base64 image website and upload your Gif image (have to weight less than 1.5 MB) then click on encode. You’ll have in the first box the Base64 String of your image, copy paste it in place of “DATA_OF_YOUR_IMAGE”. Now the preloader should be loaded quicker.

    If you want the preloader to be fully autonome, edit the file and add the CSS background URL to the preloader div. and link this URL to your preloader.gif file.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: