Exibindo imagem de carregamento durante solicitações assíncronas

Executar solicitações assíncronas usando $.ajax pode causar confusão devido à falta de indicação visível do processo contínuo. Este artigo explora técnicas para mostrar uma imagem de carregamento durante tais solicitações.

Para começar, o snippet de código fornecido executa uma solicitação assíncrona para um URL e anexa o HTML recebido a um elemento com a classe 'info'. Para exibir uma imagem de carregamento, um elemento de imagem com um 'id' de 'loading-image' pode ser usado.

Uma abordagem é mostrar a imagem antes de fazer a solicitação e ocultá-la após a conclusão:

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

Uma abordagem mais geral é vincular a imagem de carregamento aos eventos globais ajaxStart e ajaxStop. Desta forma, a imagem ficará visível para todas as solicitações assíncronas:

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

Essas técnicas fornecem uma indicação amigável da solicitação assíncrona em andamento, melhorando a experiência do usuário.