Si mal no recuerdo, es el código de un usuario al que ayudé no hace mucho.
Si trabajas con el método Ajax de jQuery, este tema del gif de carga se te hará muy fácil de resolver. Un pequeñísimo ejemplo:
Código Javascript
:
Ver original$("#miFormulario").submit(function(event){
event.preventDefault();
$.ajax({
url: $(this).prop("action"),
type: $(this).prop("method"),
data: $(this).serialize(),
success: function(response){
$("#divRespuesta").html(response);
}
});
});
$(document).ajaxStart(function(){
$("#divRespuesta").fadeOut(50);
$("#gifCargando").fadeIn(800);
}).ajaxStop(function(){
$("#divRespuesta").fadeIn(800);
$("#gifCargando").fadeOut(800);
});
Básicamente, envío los datos de un formulario mediante una petición asíncrona con Ajax. Cuando se ejecute el método Ajax en el documento, sea con el envío de datos de dicho formulario o desde otra función, se ejecuta el método
ajaxStart, mediante el cual, mostraremos el Gif de carga y ocultaremos el Div en donde se mostrará la respuesta de la petición asíncrona. Cuando acabe de ejecutarse la petición, se ejecuta el método
ajaxStop, mediante el cual, realizaremos la operación inversa a lo que hicimos cuando inició el proceso con Ajax, es decir, oculto el Gif de carga y muestro del Div de la respuesta. Con los métodos
fadeIn y
fadeOut, muestro y oculto elementos, respectivamente, en donde los números que indico entre paréntesis, indican el tiempo que durará la transición de la ejecución de cada método.
Para que veas esto en ejecución, puedes ver esta página que hice de ejemplo, los enlaces cargan con Ajax y en cada carga, aparece el Gif de carga:
http://orion.byethost24.com/zarai
Saludos