Ayuda con esto...Cargando imagen

hoberwilly · #1 (**permalink**) 17/09/2008, 13:35

Recien estoy iniciando con ajax y me encontre con esto:
http://www.forosdelweb.com/f77/imagen-cargando-como-hacer-aparecer-desaparecer-574123/

lo que no me queda claro es lo sgte:
¿...Lo que debes de hacer es crear un <div> oculto donde pongas el gif animado que diga cargando..?
me podrian indicar coomo debo crear el div y donde lo tengo que colocarlo. Gracias de antemano por la respuesta brindada

jmqc · #2 (**permalink**) 17/09/2008, 14:39

Que tal hoberwilly, no es necesario el div, lo que tienes que hacer es cambiar el siguiente codigo:

function OpenPage(url){
req=CrearXMLHttp();
/* en la dirección de la imagen va la dirección de tu gif animado o un texto que diga cargando por ejemplo*/
document.getElementById("tdc").innerHTML="<img src='loading-balls.gif'>";
if(req){
req.onreadystatechange = manejador2;
req.open("POST",url,true);
req.send(null);
}
}

Espero que te sirva. Saludos...

hoberwilly · #3 (**permalink**) 17/09/2008, 16:33

Hola jmqc,
entonces segun me indicas quedaria de la siguiente manera??:
<!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 toggle(what) {
var aobj = document.getElementById(what);
if( aobj.style.display == 'none' ) {
aobj.style.display = '';
} else {
aobj.style.display = 'none';
}
}
function CrearXMLHttp(){
XMLHTTP=false;
if(window.XMLHttpRequest){
return new XMLHttpRequest();
}else if(window.ActiveXObject){
return new ActiveXObject("Microsoft.XMLHTTP");
}
}
function OpenPage(url){
req=CrearXMLHttp();
document.getElementById("tdc").innerHTML="<img src='lajaxload.gif'>"; 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.respo nseText;
}else{
alert("Error"+req.statusText)
}
}
}
</Script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin título</title>
<style type="text/css">

</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> </p>
<p> </p>
<p> </p></td>
</tr>
<tr>
<td colspan="2" bgcolor="#DDFFDD"> </td>
</tr>
</table>
</body>
</html>
Gracias de antemano...

caricatos · #4 (**permalink**) 17/09/2008, 23:40

Hola:

La técnica del div oculto no es más que ubicarlo donde debas mostrar resultados, para eso haces que sea una capa "hermana" de la propia capa donde se muestran los resultados, con posición absoluta, left y top a cero y ancho y alto al 100%, y una imagen centrada con el dibujito que quieras usar en la espera (yo la pongo también con estilos).
Con estilos también la mantienes oculta (para este caso es igual si usas display o visibility), pero con la llamada ajax la muestras, y al obtener los resultados la vuelves a ocultar.

Puedes ver en el código de esta página: Formulario (chequeo de imágenes)... y otro tema donde se aplicó un código parecido: Un script para darle un preload al index

Saludos