// ## 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();
});

// ## 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,

// call this function within the window.onload event	
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

http://www.freshlabs.de/journal/archives/2006/07/ajax-loadingmessage-in-json/

Creates a notification message for AJAX requests.
Dependencies: prototype.js, script.aculo.us.

CSS-Styles: http://snipplr.com/view/348/loadingmessage-for-ajax-requests-css/

LoadingMessage for AJAX requests

ajax

JavaScript