Pantalla de espera en peticiones AJAX con jQuery

Cuando trabajamos con aplicaciones que tienen interfaces web, sin lugar a dudas, la experiencia de usuario mejora enormemente si hacemos uso de tecnologías como AJAX que nos permiten transmisiones y recepciones asíncronas.

No se fuerzan cambios ni refrescos de pantalla y por lo tanto, la experiencia del usuario es más continua y más parecida a cómo sería en un interfaz de escritorio. Sin embargo, este tipo de tecnologías tiene un problema: si no controlamos los eventos del usuario mientras existe una carga de datos, es posible que se generen comportamientos erráticos.

Pongamos un ejemplo. Tenemos un sistema que carga una serie de datos de forma dinámica con AJAX a través de un formulario. Cuando el usuario hace la búsqueda, la carga se realiza y se le muestra. Si la carga tarda “mucho” y no se bloquea de alguna forma la posibilidad de seguir buscando, pueden aparecer resultados incoherentes (de búsquedas anteriores) o directamente fallar el sistema por sobrecarga.

¿Cuál es la solución más popular para este tipo de problemas? Utilizar una pantalla de espera. Vamos a explicar cómo hacerlo con jQuery en muy pocos pasos.

Introducción

La solución que vamos a usar, utilizará un div no opaco de color gris, que ocupará la pantalla al completo cuando se produzca una petición de tipo AJAX. El div incorporará una animación en la parte central.

El div

Deberemos situar un div que por defecto se encuentre escondido, hide, justo al comienzo de nuestro código del body. Contendrá una imagen de carga, que podréis generar fácilmente con alguna aplicación web como AJAXLoad.

El código será el siguiente:

<div id="div_carga">
<img id="cargador" src="./images/ajax-loader.gif"/>
</div>

El estilo del div

Para que el div ocupe la pantalla completa y la imagen se quede en medio, deberemos establecer las siguientes reglas CSS:

#div_carga{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
 background: url(images/gris.png) repeat;
 display:none;
 z-index:1;
}

#cargador{
    position:absolute;
    top:50%;
    left: 50%;
    margin-top: -25px;
    margin-left: -25px;
}

El fichero gris.png que aparece, es un fichero con una imagen en PNG de color gris con transparencias.

El código jQuery

Finalmente tenemos que introducir el código que se encargue de hacer que en cuanto se produce una petición AJAX el div se muestre y que cuando finalice, se oculte. Podríamos hacerlo para cada operación, pero es mucho más cómodo usar las funciones:

• .ajaxStop()
• .ajaxStart()

¿Cómo? Como se muestra a continuación.

$('#div_carga')
   .hide()
   .ajaxStart(function() {
    $(this).show();
   })
   .ajaxStop(function() {
    $(this).hide();
   })
  ;

Como siempre, cualquier sugerencia, corrección o comentario será bien recibido.