Foros del Web - Imagen Cargando.. como hacer aparecer y desaparecer...?

Foros del Web (http://www.forosdelweb.com/)

- Frameworks JS (http://www.forosdelweb.com/f127/)

- - Imagen Cargando.. como hacer aparecer y desaparecer...? (http://www.forosdelweb.com/f127/imagen-cargando-como-hacer-aparecer-desaparecer-574123/)

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

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>

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

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.

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

Gracias! funciona perfecto!!!!!!!

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