Rick Strahl has been doing some great posts about jQuery on his blog. Yesterday he posted about an excellent resource, ajaxload.info, for creating ajax activity indicators. The second jQuery example that I’d like to share concerns how to display those images on each ajax call. Here is the relevant jQuery code:
The first two jQuery snippets are placed in the $(document).ready function. The HTML body has a div appended to it that will hold the loading image. We then set the CSS properties of that div to hide the image and define the placement.
The last snippet is outside of the $(document).ready function and serves to bind the visibility of the ajaxStart and ajaxStop jQuery events.
Now, everytime an ajax call is placed back to the server, a animated gif image will display in the upper right hand corner of the page to indicate background ajax activity. When the request is finished, the image will hide itself again.
See the demo and view the source to learn more. In this demo, your message is POSTed via ajax to the server which sleeps for 3 seconds then outputs your message into a message box. Make sure to peak at the upper right side of the page to see the activity indicator.