Función Loading para AJAX

A continuación muestro una función para el uso de AJAX.

NOTA: La ruta de la imagen la tendrán que poner correctamente ustedes. Esta probado en IE8, FF 10.0.2 Chrome 17.0.963.56 m. La versión de JQuery es 1.4.2 que pueden descargar desde http://docs.jquery.com/Downloading_jQuery

Para crear su propia imagen del Loading, les recomiendo la página http://ajaxload.info/ donde hay vario tipos y pueden personalizar la imagen.


function loading(val) {
//val = 1 it is for create loading
//val = 0 it is for destroy it
if (val) {
var div = document.createElement("div");
var width = $(document).width() - 1;
var height = $(document).height();

$(div).attr("id","loadingDiv");

$(div).css({
"visility":"visible",
"position":"absolute",
"z-index":"100000",
"background-color":"#000",
"width":width+"px",
"height":height+"px",
"left":"0px",
"top":"0px"
}).fadeTo("slow",0.5);;

var heightWin = $(window).height();
var widthWin = $(window).width();
var img = document.createElement("img");

$(img).attr("src", "ruta/de/mi/imagen.gif");

var widthImg = img.width;
var heightImg = img.height;

var left = (widthWin - widthImg) / 2;
var top = (heightWin - heightImg) / 2;

$(img).css({"position":"relative", "left":left, "top":top })

$(div).append(img);


$("body").append(div);
}
else {
$("#loadingDiv").remove();
}
}

Espero que sea de bastante utilidad, cualquier duda

Saludos