Indicating loading activity has become a serious topic since Ajax-driven functionality on websites has emerged throughout the Internet.

This is a script I used in my blog now for some months. As I stumbled upon the article by Ian Selby, Ajax Activity Indicators: Make them global and unobtrusive, I thought I should write an article about my method as well.

I assume that you’re familiar with creating and managing Ajax-requests, also where you can download cool activity indicators.

Demo

If you’d like to see how my solution works, just type in at least 3 characters in the searchform. The notification will then appear near the top of this website.

The code

I proudly present: The JavaScript code (You can also view it on my snipplr account:
Dependencies: prototype.js, script.aculo.us.

// ## LoadingMessage
// ## Version: 0.6
// ## Author: Tim Isenheim - http://blog.freshlabs.de 

var LoadingMessage = {
imageURL : 'ajax-loader.gif',
waitImg : null,
containerId : "loading-message",
loadTextId : "loading-text",
waitImgId : "loading-image",
waitImgWidth : 16,
waitImgHeight : 16,

init : function(){
	this.waitImg = document.createElement('img');
	this.waitImg.setAttribute('src', this.imageURL);
	this.waitImg.setAttribute('height', this.waitImgHeight);
	this.waitImg.setAttribute('width', this.waitImgWidth);
	this.waitImg.setAttribute('alt','loading...');
	this.waitImg.id = this.waitImgId;
	this.waitImg.style.border = '0';
	this.waitImg.style.backgroundColor = 'transparent';
	this.waitImg.style.margin = '0';
	this.waitImg.style.padding = '0';
},

append : function(where){
	var parent = $(where);
	var loadbox;
	if(!$(this.containerId)){
		loadbox = document.createElement('div');
		var loadtext = document.createElement('div')
		loadbox.id = this.containerId;
		loadtext.id = this.loadTextId;
		txt = document.createTextNode(" loading");
		loadtext.appendChild(this.waitImg);
		loadtext.appendChild(txt);
		loadbox.appendChild(loadtext);
	}
	else loadbox = $(this.containerId);
	loadbox.style.display = "none";
	new Effect.Appear(loadbox, { to: 0.7, queue: 'end' });
	parent.appendChild(loadbox);
},

remove : function(){
	new Effect.Fade(this.containerId,
                       {duration: 0.25, queue: 'end' });
}

} // ### .LoadingMessage

// Attaching the init function to the window.onload event
Event.observe(window,'load', function(){
    LoadingMessage.init();
});

As the script is implemented as Object Notation it may be easy to recognize what it accomplishes. E.g. the init()-function only creates the activity indicator as image, so it is already loaded before it is immediately rendered. All functions are pretty straightforward and should be easy to understand.

1. Init the LoadingMessage

   To initiate the message (better: preloading the image) use LoadingMessage.init() when the page loads. So attaching it to the window.onload event should do the job.
   The complete code for the initial load:

   // standard window loading event
   window.onload = function(){ LoadingMessage.init(); }
   

   Use this when you have prototype.js installed:

   Event.observe(window,'load', function(){
       LoadingMessage.init();
   });
   

2. Attaching the message

   When your AJAX request is executed, call this

   LoadingMessage.append(parent);
   

   Where parent is the DOM-node on which the message will be appended.

3. Removing the message

   As the LoadingMessage object knows it’s DOM-ID you just need to call:

   LoadingMessage.remove();
   

Styling the notification

These stylesheet rules positions the loading message 10 pixels from the top of the browser canvas and displays the notification as almost black beam.

#loading-message{
	position: fixed;
	z-index: 100;
	top: 10px;
	left: 0;
	width: 100%;
	font: bold 1.8em "Lucida Grande", Helvetica, Arial, sans-serif;
	text-align: center;
	background-color: #000;
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	padding: 3px 0;
	/*filter:alpha(opacity=70);
	opacity: 0.7;
	-moz-opacity:0.7;*/
}

#loading-message #loading-image{
	vertical-align: middle;
	margin-bottom: 4px;
}

#loading-message #loading-text{
	color: #fff;
	margin: 0;
	/*filter:alpha(opacity=100);
	opacity: 1;
	-moz-opacity:1;*/
}

The rules that are commented out would make the LoadingMessage transparent, but this is implemented in the Effect.Appear()-function with the to: attribute. So to: 0.7 lets the element appear until an opacity of 70% is reached.

Please let me know if you have any tips for improvement. I will update the documentation as soon as I can gather some extra time.

Posted in Design, Developing, Tags:ajax, javascript, loading, throbber

Possibly Related Entries

• Ajax Language Switcher for Basic Bilingual
• cocomments now supported
• Language switching for Basic Bilingual
• Another JavaScript-Library: MochiKit
• About