Pues yo tambien llevaba tiempo queriendo meter el loading, porque ya hacía cosas con AJAX pero no veía como hacer para que el usuario se diera cuenta dw que el proceso se había realizado de manera exitosa.
Leyendo un poco las respuestas de este hilo, empecé a realizar cambios a mis programas, no sé que tan buena solución sea pero yo lo hice asi.
archivo.html
Código PHP:
<script language="javascript" type="text/javascript">
<!--
function espera()
{
/* Esta función solo nos sirve para retardar la carga de los datos */
contenedor.innerHTML = ajax.responseText
}
function cargarContenido(){
contenedor = document.getElementById('contenedor');
d1 = document.getElementById('sujeto').value;
ajax=nuevoAjax();
ajax.open("GET", "includes/xasimilados.php?todo="+d1,true);
ajax.onreadystatechange=function() {
if (ajax.readyState != 4) {
contenedor.innerHTML = '<img src="images/ajax-loader.gif" width="32" height="32"> Cargando datos...';
}else{
window.setTimeout('espera();',2000); //pretendemos demorar la respuesta unos segundos
}
}
ajax.send(null)
}
...
.....
....... /* mucho html */
<td colspan="2">
<input type="button" name="cmdSubmit" value="Calcular" id="cmdSubmit" title="Calcular" onClick="cargarContenido();">
</td>
<tr>
<td align="center">
<div id="contenedor">Esperando cálculo... </div></td>
</tr>
</table>
Estuve intentando poner la imagen dentro del <div> y que inicialmenete estuviera como display:none y en la revisión del estado hacer que se mostrara,pero solo me lo hace la primera ocasión y en las subsecuentes me dice que el objeto no acepta esa propiedad o método.
Tambien comentar que me ha servido de mucho leer la clase creada po Matt Kruse AjaxToolBox, ya que trae unos ejemplos que en mi particular punto de visto, han sido los mejores por mucho en mis lecturas, además de que los métodos los tiene muy bien documentados.
http://www.ajaxtoolbox.com/
Saludos!!