v0.2 Release – Adding a loader GIF to Pushloghtml’s OnScroll feature

These days it seems like every AJAX application has some sort of loader GIF to let the user know that new data is being loaded. It has almost become a standard and lets one know that they are using an AJAX application. I wanted to add this functionality to pushloghtml’s OnScroll feature, bug 459727

So, I went hunting for some a good loader GIF that I could use and in the process I found this nifty little site: http://www.ajaxload.info/, which lets one create a custom loader GIF.

The next step was to decide where to place the actual GIF on the server so that I could call it in the pushlog.tmpl file. This had me stumped for a while. I tried placing the GIF in various places but nothing seemed to work. Then, I noticed there were pre-existing images on the pushloghtml page and they must be stored somewhere on the server so I did a little search for *.jpeg and found the location of the images.

To show the GIF before new data is loaded I placed the following code in my OnScroll function:

var loader = document.getElementById("loader");
      loader.innerHTML = '<img src="{url}static/ajax-loader.gif" align="right" />';

Then, right before the very first row is displayed on the screen with appendChild() I remove the GIF by doing the following:

loader.innerHTML = "";

The above code shows the GIF OnScroll (bottom-right corner): http://sidkalra.com/files/mercurial/loader.png

This entry was posted in Mercurial Project, Open Source and tagged , , , , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>