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:
1 2 | 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:
1 2 | loader.innerHTML = ""; document.getElementById("titlePush").appendChild(trScroll); |
The above code shows the GIF OnScroll (bottom-right corner): http://sidkalra.com/files/mercurial/loader.png
