Ver Mensaje Individual
  #9 (permalink)  
Antiguo 20/01/2014, 18:19
Avatar de satjaen
satjaen
 
Fecha de Ingreso: septiembre-2012
Ubicación: Jaén (Andalucía)
Mensajes: 893
Antigüedad: 12 años, 3 meses
Puntos: 10
Respuesta: Problema con estado 1 en loader

Cita:
Iniciado por Alexis88 Ver Mensaje
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
Ok, si soy yo mismo, pero Alexis como lo adapto al código del principio del post