simbolo de cargando

Sougiro · #1 (**permalink**) 13/01/2011, 09:32

Hola a todos, soy un novato que quiere poner un gif de cargando mientras que las formulas que tengo en php terminan de ser cargadas, he estado buscando por la web pero solo encuentro que esto se puede hacer en javascript.

Me podrian indicar como lo hago o donde encuentro la informacion para crear y poner en marcha la imagen.

IsaBelM · #2 (**permalink**) 13/01/2011, 14:14

quizás es mejor que preguntes en el foro de ajax

javiercitox · #3 (**permalink**) 13/01/2011, 16:37

lo que hago yo es bastante simple, 1ro me fijo donde quiero que aparesca la imagen de cargando, entonces todo el contenido del formulario lo coloco dentro de un div y le asigno un id a ese div. ejemplo: <div id="contenido">Aquí todo el contenido que se procesa</div>

a continuación de ese div agrego otro div, pero que no sea visible
ejemplo: <div id="cargando" style="display:none;">Aquí pongo la imagen o el texto que quiero mostrar mientras se carga</div>

cuando presiono el boton enviar, al evento onclick le asignas la función para enviar el formulario, pero antes les cambio las propiedades display a los div desde una funcion

ej:

function envio(){setTimeout("subiendo()", 1);}

function subiendo() {
document.getElementById("contenido").style.display = "none";
document.getElementById("cargando").style.display = "inherit";
document.forms[0].submit();
}

resumiendo (copia y pega para que veas http://htmledit.squarefree.com/):

Código HTML:

Ver original<head>
<script>
function envio(){setTimeout("enviar()", 1);}
 function enviar() {            
                document.getElementById("contenido").style.display = "none";
                document.getElementById("cargando").style.display = "inherit";
 
                document.forms[0].submit();
            } 
</script>
</head>
<body>
<FORM ACTION="paginaquerecibedatos.php" METHOD="POST">
<div id="contenido">Aquí todo el contenido que se procesa...
<button name="boton_1" type="button" onclick="envio()">enviar!</button>
 
</div>
 
<div id="cargando" style="display:none;">Aquí pongo la imagen o el texto que quiero mostrar mientras se carga</div>
</FORM>
</body>