Ver Mensaje Individual
  #5 (permalink)  
Antiguo 14/03/2017, 16:21
Avatar de Ratus-BROWN
Ratus-BROWN
 
Fecha de Ingreso: febrero-2009
Ubicación: Valencia
Mensajes: 169
Antigüedad: 15 años, 10 meses
Puntos: 8
Respuesta: Efecto loader en llamada Ajax con Jquery

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:
Ver original
  1. $.ajax({
  2.                                                 type: "GET",
  3.                                                 url: 'laquesea',
  4.                                                 data: { dato: num },
  5.                                                 beforeSend: function () {
  6.  
  7.                                                     $("#precarga").fakeLoader({
  8.                                                         timeToHide: 12000,
  9.                                                         bgColor: "#e74c3c",
  10.                                                         spinner: "spinner2"
  11.                                                     });
  12.  
  13.                                                     $("#precarga").fakeLoader();
  14.  
  15.                                                 },
  16.                                                 success: function (data) {
  17.  
  18.                                                     $("#contenido").html(data);
  19.  
  20.                                                 },
  21.                                                 error: function () {
  22.  
  23.                                                     console.log("Problem with petition.")
  24.                                                 },
  25.                                                 complete: function () {
  26.  
  27.                                                     $("#precarga").hide();
  28.  
  29.                                                 }
  30.  
  31.                                             });

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

Por cierto el plugin fakeLoader está accesible en un repositorio de Github. ;)
__________________
Disturb_downstairs (....we are cooking!)