[SOLUCIONADO] Efecto loader en llamada Ajax con Jquery

[Ratus-BROWN]

Hola buenas a tod@s,


Quería saber como se debe usar un elemento gráfico de precarga, es decir la típica animación mientras se están cargando datos.

Lo estoy intentando con un plugin de Jquery llamado fakeLoader, pero leyendo la documentación resulta que es una simulación de precarga (de ahí su nombre). Yo básicamente lo que quiero conseguir es que esta animación se inicie al hacer la petición Ajax de los datos de un listado y que finalice la animación cuando los datos han sido cargados.

¿Cómo le indico al ajax que inicie una precarga al ejecutar la petición y finalice cuando tengamos la respuesta con los datos.?

¿Podría alguien orientarme un poco?
Gracias. :)

[sonystar_17]

con ajaxStart y ajaxStop deberías poder aunque creo que solo hasta jquery 1.8 o 1.7 ( no recuerdo bien )

Código Javascript:

$(document).ajaxStart(function(){
          $("#DivLoad").css("display","block");
        });
        $(document).ajaxComplete(function(){
          $("#DivLoad").css("display","none");
        });
 

algo así , un div una imagen dentro y listo. ahora mismo no puedo probar.

[Ratus-BROWN]

Hola Sonystar_17,

Muchas gracias, en efecto he visto por la web una solución de esta forma. También creo que es posible hacerlo así:

Código Javascript:

$('#loading-image').show();
$.ajax({
      url: uri,
      cache: false,
      success: function(html){
        $('.info').append(html);
      },
      complete: function(){
        $('#loading-image').hide();
      }
    });
 

Pero aún tengo que probarlo... ¡Muchas gracias! :D

Responderé este hilo cuando consiga hacerlo, así podrá servirle a otros que tengan que implementar una solución parecida. :)

[sonystar_17]

si debería funcionar , en un rato lo pruebo!

[Ratus-BROWN]

Hola buenas a tod@s,

En efecto la solución pasa por añadir las propiedades de beforeSend y complete a la llamada Ajax de JQuery:

Un ejemplo hecho con el plugin de JQuery fakeLoader como elemento que se muestra en la precarga:

Código Javascript:

$.ajax({
                                                type: "GET",
                                                url: 'laquesea',
                                                data: { dato: num },
                                                beforeSend: function () {
 
                                                    $("#precarga").fakeLoader({
                                                        timeToHide: 12000,
                                                        bgColor: "#e74c3c",
                                                        spinner: "spinner2"
                                                    });
 
                                                    $("#precarga").fakeLoader();
 
                                                },
                                                success: function (data) {
 
                                                    $("#contenido").html(data);
 
                                                },
                                                error: function () {
 
                                                    console.log("Problem with petition.")
                                                },
                                                complete: function () {
 
                                                    $("#precarga").hide();
 
                                                }
 
                                            });
 

Espero que pueda servirle a mas gente. ¡Saludos a tod@s! :)

Por cierto el plugin fakeLoader está accesible en un repositorio de Github. ;)