Easy throbbing

When using Ajax techniques, you can use a throbber to let the user know that something is being done on the background. This throbber — usually an animated gif — is either shown or hidden when an Ajax call is initiated or finished. Using CSS to accomplish this is one option, but I prefer to add and remove the image from the DOM entirely. In this example, I’ll explain how you can use a Throbber class in JavaScript to create your indicators, and turn them on or off without contaminating your DOM.

What’s this? A library?

Well, yes. It is. I’m using the compact JavaScript framework Mootools to make things easier. There’s nothing stopping you from altering my example to a library independent version, though… Enough with the small talk, let’s get crackin’!

var Throbber = new Class({
 initialize : function (target) {
  this.target  = $(target);
  this.status  = 0;
  this.img     = new Element('img');
  this.img.src = arguments[1] || '/images/throbber.gif';
 },

 on : function() {
  if (this.status == 0) {
   this.target.appendChild(this.img);
   this.status = 1;
  }
 },

 off : function() {
  if (this.status == 1) {
   try { $(this.img).remove(); } catch(x) { }
   this.status = 0;
  }
 },

 toggle : function() {
  if (this.status)
   this.off();
  else
   this.on();
 }
});

Let’s go through the code, shall we? First of all, we define our new throbber class: var Throbber = new Class();. The initialize method will be executed upon class instantiation. In this case, we’ll need a target element to put the throbber, the status is set to 0 and an img element is created. The source of this image is either the second (optional) argument, or the default source: /images/throbber.gif.

The on method will append the image to its target and set the status to 1. The off method will remove the image from the DOM, if it’s not already gone (for example by an innerHTML call). The toggle method will either execute the on or off method, depending on the status.

That’s all there is to it! We’re now ready to put this baby in action.

Examples

Basic usage is easy. Just instantiate the class, giving at least one argument: the id of the target element, and turn your throbber on and off by using its methods. With Ajax calls, you can turn it on right before you make the call and turn it off as soon as the call is finished.

var throb = new Throbber('throb-holder');
throb.on();
// some more code
throb.off();

Check out this straight forward working example, which demonstrates the toggle method.

Need more control?

I chose to keep this class simple, but for extra control you could extend it by adding some attributes to the throbber image, like alt, class or id. Then use some clever CSS rules to display the throbber exactly how you like it.

December 20th 2006 | Ajax, DOM, JavaScript, Mootools | 3 comments

Need help? Hire me!

Like it? Donate!