Ajax loading css (indicadores de carga)

Si desarrollas aplicaciones web, seguramente te has topado con el comentario por parte de los usuarios de que dan click a un botón o enlace y dicen ellos que no pasa nada.. y claro, algunas veces el servidor responde muy lento debido a la carga de peticiones o la cantidad de datos que debe retornar.. entonces es ahí cuando se hace necesario mostrar de manera visual que deben esperar, que su petición esta siendo atendida y que pronto obtendrán una respuesta.

Este es uno de esos métodos siempre útiles para cuando trabajamos con ajax (postbacks o callbacks), mejor conocidos en inglés como loaders o loading spinners. Este post es una pequeña guía para mostrar como implementar un loader utilizando jQuery o Mootols y ajax.

Es necesario escribir un poco de CSS, por lo que el código que viene es la clave para que el cargador tenga sentido

div.loading, .loading {
   background-color: #FFFFFF;
   background-image: url('loading.gif');
   background-position: center center;
   background-repeat: no-repeat;
   z-index: 1400;
}
div.loading * {
   visibility: hidden;
}

Y ahora implementado utilizando jQuery

$.ajax({
  url: 'prueba.html',
  type: 'get',
  beforeSend: function() {
    $(".grid").addClass("loading");
  },
  success: function(respuesta) {
    $(".grid").empty().html(respuesta);
  },
  complete: function() {
    $(".grid").removeClass("loading");
  }
});

Y para quienes gustan de Mootools, se hace de esta forma

var req = new Request({
   method: 'get',
   url: 'prueba.html',
   onRequest: function() {
      $(".grid").addClass("loading");
   },
   onComplete: function(respuesta) {
      $(".grid").removeClass("loading");
      $(".grid").empty().setHTML(respuesta);
   }
}).send();

Para este ejemplo loading.gif es una imagen animada que puede conseguirse en cualquiera de los siguientes sitios:
http://www.ajaxload.info/
http://preloaders.net/
http://www.loadinfo.net/
http://www.webscriptlab.com/
http://www.chimply.com/Generator
http://mentalized.net/activity-indicators/

Para finalizar, .grid representa el elemento o etiqueta en el cual se mostrará el cargador.. yo cuando lo utilicé fue para una tabla que paginaba vía ajax..

Posted from WordPress for Android

Jack Fiallos

Co-fundador de Qbit Mexhico, usuario de linux, Developer en tecnologías web.. Nicaragüense, centro en basketball, primer centro en rugby y pintor los fines de semana. Ortögrafo y ambientalista psicológico (de escritorio).. ese soy yo!

Si te ha servido compártelo y difunde nuestro blog..