Cargando

Mostrar imagen mientras se ejecuta un script.




Pulsa corazón para recibir avisos de nuevas Respuestas

  AUTOR PREGUNTA

Publicado 17 abril 2014 - 01:06
Buen día..
Amidos, tengo una consulta que me tiene un poco desesperado desde hace días.. ya que necesito mostrar una imagen al enviar un formulario...

Detalle...
Tengo un formulario que importa un backup de MYSQL para realizar un restore de la base, y necesito mostrar un gif mientras se ejecuta el archivo o una barra de progreso.....
con la finalidad que no quede solo el mensaje de "esperando localhost"....

Gracias....
  • 2 personas más tuvieron esta duda Yo también
  • Volver arriba

Publicado 18 abril 2014 - 20:11
Te voy a dejar un código realizado con jQuery, la imagen te la puedes bajar de Google y colocarla a tu gusto, esta te la voy a poner en el código como "imagen_carga" dentro un div como imagen de fondo:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>$(document).ready(function(){
window.onload=cerrar;
function cerrar(){
$("#carga").animate({"opacity":"0"},1000,function(){$("#carga").css("display","none");});
}
$("#carga").click(function(){cerrar();});
});</script>
<div id="carga" style="background-image:url(http://localhost/img/imagen_carga.gif);"></div>

Me avisas como te va. Saludos

   AUTOR PREGUNTA

Publicado 21 abril 2014 - 08:49
Mucho gusto. amigo....
a lo mejor pueda ser de ayuda para otros colegas....
sabes lo que necesitaba era un poco mas sencillo: acá colocaré el codigo


/* con la siguiente funcion hago que al momeno de enviar el formulario con un archivo para procesar muestro un gif de loading...
y luego de 2000 mls. se ejecuta el archivo.... de este modo sencillo pero util, puedo mostrarle al usuario que se está ejecutando el archivo que ha seleccionado. */
<head>
    <script type="text/javascript" language="javascript">
function mostrar_imagen(id) {
   img = document.getElementById(id);
   img.innerHTML = '<img src="2.gif" />';
  
   setTimeout("document.sql.submit()",2000);
/*  document.sql.submit() */
}
</script>
</head>


Luego la parte del formulario que hace que se ejecuten las dos funciones:
1- que muestre el gif de cargando
2- ejecutar el archivo.
Esto lo logré cambiando la propiedad del boton SUBMIT del formulario, haciendolo un boton normal, aplicanco la propiedad de onclick.
echo "<br><br><input type=\"button\" onclick=\"javascript:mostrar_imagen('imagen')\" value=\"Procesar\" type=\"submit\" class=\"button\"/>";



Muchas Gracias por las molestías y cortesía en acudir a la ayuda....

Bendiciones..

 

Publicado 21 abril 2014 - 12:33

Mucho gusto. amigo....
a lo mejor pueda ser de ayuda para otros colegas....
sabes lo que necesitaba era un poco mas sencillo: acá colocaré el codigo


/* con la siguiente funcion hago que al momeno de enviar el formulario con un archivo para procesar muestro un gif de loading...
y luego de 2000 mls. se ejecuta el archivo.... de este modo sencillo pero util, puedo mostrarle al usuario que se está ejecutando el archivo que ha seleccionado. */

<head>
<script type="text/javascript" language="javascript">
function mostrar_imagen(id) {
img = document.getElementById(id);
img.innerHTML = '<img src="2.gif" />';

setTimeout("document.sql.submit()",2000);
/* document.sql.submit() */
}
</script>
</head>


Luego la parte del formulario que hace que se ejecuten las dos funciones:
1- que muestre el gif de cargando
2- ejecutar el archivo.
Esto lo logré cambiando la propiedad del boton SUBMIT del formulario, haciendolo un boton normal, aplicanco la propiedad de onclick.
echo "<br><br><input type=\"button\" onclick=\"javascript:mostrar_imagen('imagen')\" value=\"Procesar\" type=\"submit\" class=\"button\"/>";



Muchas Gracias por las molestías y cortesía en acudir a la ayuda....

Bendiciones..


Gracias por compartir tu solución, por eso te damos un punto de reputación positivo.

Saludos.


X