Imagen Cargando.. como hacer aparecer y desaparecer...?

farra · #1 (**permalink**) 09/04/2008, 07:13

hola, estoy comenzando a usar ajax y todavia no logre lo de la imagen cargando, estoy seguro que debe ser algo simple pero soy novato todavia en este tema y no lo capte aun...

este es mi codigo:

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<Script>
function CrearXMLHttp(){
	XMLHTTP=false;
	if(window.XMLHttpRequest){
		return new XMLHttpRequest();
	}else if(window.ActiveXObject){
		return new ActiveXObject("Microsoft.XMLHTTP");
	}
}
function OpenPage(url){
	req=CrearXMLHttp();
	if(req){
		req.onreadystatechange = manejador2;
		req.open("POST",url,true);
		req.send(null);
	}
}
function manejador2(){
	if(req.readyState == 4){
		if(req.status == 200){
			document.getElementById("tdc").innerHTML=req.responseText;
		}else{
			alert("Error"+req.statusText)
		}
	}
}
</Script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin t&iacute;tulo</title>
<style type="text/css">
<!--
body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}
-->
</style></head>

<body>
<table width="100%" border="1">
  <tr>
    <td colspan="2" align="center" bgcolor="#DDFFDD"><strong>HEAD</strong></td>
  </tr>
  <tr>
    <td width="20%" height="510" align="center" valign="top" bgcolor="#EEF7E6"><table width="200" border="1">
      <tr>
        <td align="center" valign="middle"><a href="javascript:OpenPage('Pagina1.html')">Link1</a></td>
      </tr>
      <tr>
        <td align="center" valign="middle"><a href="javascript:OpenPage('Pagina2.html')">Link2</a></td>
      </tr>
      <tr>
        <td align="center" valign="middle"><a href="javascript:OpenPage('pagina3.html')">Link3</a></td>
      </tr>
    </table> </td>
    <td width="80%" id="tdc" align="left" valign="top" bgcolor="#FFFFCE"><p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p></td>
  </tr>
  <tr>
    <td colspan="2" bgcolor="#DDFFDD">&nbsp;</td>
  </tr>
</table>
</body>
</html>

GatorV · #2 (**permalink**) 09/04/2008, 07:56

Lo que debes de hacer es crear un <div> oculto donde pongas el gif animado que diga cargando, luego en tu función OpenPage, muestras el div, y en tu función manejador2, cuando ya recibes los datos (status 200), ocultas el div.

Para mostrar el div puedes usar:

Código:

function toggle(what) {
        var aobj = document.getElementById(what);
        if( aobj.style.display == 'none' ) {
               aobj.style.display = '';
        } else {
               aobj.style.display = 'none';
        }
}

Con eso ya podrias hacer algo así:

Código:

// suponiendo que tu div se llama loading
function OpenPage(url){
	req=CrearXMLHttp();
	if(req){
		req.onreadystatechange = manejador2;
		req.open("POST",url,true);
		req.send(null);
                toggle('loading'); // ojo aqui
	}
}
function manejador2(){
	if(req.readyState == 4){
		if(req.status == 200){
                        toggle('loading'); // ojo aca
			document.getElementById("tdc").innerHTML=req.responseText;
		}else{
			alert("Error"+req.statusText)
		}
	}
}

Saludos.

farra · #3 (**permalink**) 09/04/2008, 08:07

Gracias! funciona perfecto!!!!!!!

memoo · #4 (**permalink**) 24/06/2008, 13:13

Gracias por la ayuda, creo que es lo que necesito :D Saludos

Excelente si funcionó, creoq ue de todas las opciones que han puesto para poner una imagen de cargando es la más fiable y recomandable, gracias !
Saludos