Ver Mensaje Individual
  #8 (permalink)  
Antiguo 20/01/2014, 18:11
Avatar de Alexis88
Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.552
Antigüedad: 12 años, 5 meses
Puntos: 977
Respuesta: Problema con estado 1 en loader

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
  1. $("#miFormulario").submit(function(event){
  2.     event.preventDefault();
  3.     $.ajax({
  4.         url: $(this).prop("action"),
  5.         type: $(this).prop("method"),
  6.         data: $(this).serialize(),
  7.         success: function(response){
  8.             $("#divRespuesta").html(response);
  9.         }
  10.     });
  11. });
  12.  
  13. $(document).ajaxStart(function(){
  14.     $("#divRespuesta").fadeOut(50);
  15.     $("#gifCargando").fadeIn(800);
  16. }).ajaxStop(function(){
  17.     $("#divRespuesta").fadeIn(800);
  18.     $("#gifCargando").fadeOut(800);
  19. });

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
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand