Foros del Web » Programando para Internet » Jquery »

[SOLUCIONADO] Efecto loader en llamada Ajax con Jquery

Estas en el tema de Efecto loader en llamada Ajax con Jquery en el foro de Jquery en Foros del Web. 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. ...
  #1 (permalink)  
Antiguo 13/03/2017, 16:20
Avatar de Ratus-BROWN  
Fecha de Ingreso: febrero-2009
Ubicación: Valencia
Mensajes: 169
Antigüedad: 15 años, 1 mes
Puntos: 8
Efecto loader en llamada Ajax con Jquery

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. :)
__________________
Disturb_downstairs (....we are cooking!)
  #2 (permalink)  
Antiguo 13/03/2017, 22:30
 
Fecha de Ingreso: septiembre-2015
Mensajes: 142
Antigüedad: 8 años, 6 meses
Puntos: 13
Respuesta: Efecto loader en llamada Ajax con Jquery

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

Código Javascript:
Ver original
  1. $(document).ajaxStart(function(){
  2.           $("#DivLoad").css("display","block");
  3.         });
  4.         $(document).ajaxComplete(function(){
  5.           $("#DivLoad").css("display","none");
  6.         });

algo así , un div una imagen dentro y listo. ahora mismo no puedo probar.
  #3 (permalink)  
Antiguo 14/03/2017, 00:13
Avatar de Ratus-BROWN  
Fecha de Ingreso: febrero-2009
Ubicación: Valencia
Mensajes: 169
Antigüedad: 15 años, 1 mes
Puntos: 8
Respuesta: Efecto loader en llamada Ajax con Jquery

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:
Ver original
  1. $('#loading-image').show();
  2. $.ajax({
  3.       url: uri,
  4.       cache: false,
  5.       success: function(html){
  6.         $('.info').append(html);
  7.       },
  8.       complete: function(){
  9.         $('#loading-image').hide();
  10.       }
  11.     });


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. :)
__________________
Disturb_downstairs (....we are cooking!)
  #4 (permalink)  
Antiguo 14/03/2017, 11:11
 
Fecha de Ingreso: septiembre-2015
Mensajes: 142
Antigüedad: 8 años, 6 meses
Puntos: 13
Respuesta: Efecto loader en llamada Ajax con Jquery

si debería funcionar , en un rato lo pruebo!
  #5 (permalink)  
Antiguo 14/03/2017, 16:21
Avatar de Ratus-BROWN  
Fecha de Ingreso: febrero-2009
Ubicación: Valencia
Mensajes: 169
Antigüedad: 15 años, 1 mes
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!)

Etiquetas: ajax, data, loader
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 18:12.