Web apps: Simple loading indicator with jquery and animated gif problem

The problem


It can be a real pain, if you have a web application, that has to load a lot of data, or where there is a lot of processing in the backend, and that you have to sit and wait until the page has loaded after you made a "request" (POST or GET...). I am talking about a waiting period of maximum 1.5 to 2 seconds. For example you can have a j2ee frontend and a As400 backend, and the j2ee waits for the As400 that is doing the processing.
Now, staring at the screen is not funny if the interaction is not going smooth. So, what we can do during the "wainting", is showing an indicator, that shows the well known "Please be patient, data is being loaded..." stuff with a running progress bar or turning circle. I am talking about a web app that is not or minimal ajax powered. For ajax, there are other solutions. (I know, Ajax is the cool stuff today, but still a lot of apps are not using it)

The solution

The solution is simple...When a request is made, show a popup or whatever that shows a waiting indicator...
Of course, between saying and doing something, there is a difference.
Most developers will code a waiting dialog after every single event, request, whatever...but this is not the best way, if you want it on every request. What there should be done, is calling the "waiting dialog" everytime the "i-did-a-request"-event of the browser occurs. Those events are called the "onunload" and "onbeforeunload" events.

Onunload and onbeforeunload

First of all, what is the difference between onunload and onbeforeunload. In a simple way, the onbeforeunload event is called immediately after a post of get occured. It lasts until the browser gets a response from the server. In that case, the onunload event is triggered and the page is reloading...
So the event that we have to code against, is the onbeforeunload event. Every browser has this event except the opera browser. But it is said that in future versions this little thing will be implemented.

Jquery

For keeping it simple, we will use jquery for implementing those things. First of all, we will code our waiting dialog with an animated gif in it. Initialy, it will be hidden, but this is done by jquery. You can put that dialog everywhere in your html page.

The waiting dialog:

<div id="waitdialog" title="Loading">
 <p>
  <img src="./images/pics/loader.gif" align="left">
  <br>Loading content, please wait...
 </p>
</div>

Of course, we must tell jquery that this div, is a dialog, with some properties,
like this :

$(function() {
 $( "#waitdialog" ).dialog({
  autoOpen: false,
  resizable : false,
  height: 120,
  width: 400
 });
});

It says that it must be hidden in the beginning (autoOpen false) an some props.

So the dialog is ready, but must be called on the "onbeforeunload" event of the browser.
We do it this way:

$(window).bind('beforeunload', function() {       
 $( "#waitdialog" ).html("

Loading content, please wait...
");
 $( "#waitdialog" ).dialog( "open" );
});

Here, the dialog is opening on the wanted event. When you try this, every time a request is made, this code will be run trough, and the dialog will disappear on the reload of the screen.
Of course, here we use the jquery dialog...u can use whatever dialog or system you want for showing an indicator. for example "blockUI" is also a good one.
Again, do not use this for tiny or simple websites, because it is overkill.

Animated gif problem in IE

But...why is the html re-written in that functions? becaus this is a trick for using animated gifs in IE. Animated gifs stop working when the browser is doing a request or is waiting for an answer (onbeforeunload). It's a known bug (limitation) of IE. So what we do is preloading the image (html div) and changing the source of the div when the gif is needed. That does the trick.

other browsers do not have that problem...

hope this helps some people...