Mostrar la imagen de carga durante solicitudes asincrónicas

Realizar solicitudes asincrónicas usando $.ajax puede generar confusión debido a la falta de indicación visible del proceso en curso. Este artículo explora técnicas para mostrar una imagen de carga durante dichas solicitudes.

Para empezar, el fragmento de código proporcionado realiza una solicitud asincrónica a una URL y agrega el HTML recibido a un elemento con la clase 'info'. Para mostrar una imagen de carga, se puede usar un elemento de imagen con una 'id' de 'imagen de carga'.

Un enfoque es mostrar la imagen antes de realizar la solicitud y ocultarla después de completarla:

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

Un enfoque más general es vincular la imagen de carga a los eventos globales ajaxStart y ajaxStop. De esta manera, la imagen será visible para todas las solicitudes asincrónicas:

$('#loading-image').bind('ajaxStart', function(){
    $(this).show();
}).bind('ajaxStop', function(){
    $(this).hide();
});

Estas técnicas proporcionan una indicación fácil de usar de la solicitud asincrónica en curso, mejorando la experiencia del usuario.