Esse post requer um básico conhecimento de Ajax, HTML e Javascript
Uma das principais funcionalidades do Jquery é o método load do Ajax…
$("#meudiv").load("core.php", { 'action': 'atualizar' } );
Ele chama um script (core.php) e passa parâmetros por POST (action=’atualizar’), o script processa e retorna um resultado que é automagicamente inserido no meu div (meudiv).
Por debaixo dos panos, ele abre uma conexão via JavaScript, chama a seguinte URL http://meusite.com/core.php?action=atualizar, o resultado dessa url (algum texto qualquer, um registro de banco de dados, etc) retorna e o Jquery usando DOM substitui o conteúdo do div especificado pelo conteúdo do retorno do meu script, maravilha hein?
Uma chateação disso é quando o script demora um pouco pra processar, sua aplicação web fica lá paradona e isso pode dar a sensação pro usuário que nada está acontecendo.
Eis que surge a solução, vamos por um gif de loading, como esse:
Daí quando eu chamar a função ele vai aparecer e o usuário vai saber que o script está trabalhando em segundo plano.
Eu resolvi esse impasse com um truque bem simples, digamos que seu gif está no subdiretório img (img/loading.gif), pois você é uma pessoa organizada e não mistura os tipos de arquivo da sua aplicação.
Então vamos lá, simplesmente adicione a seguinte linha antes do método load:
$("#meudiv").html("<img src='img/loading.gif'>");
$("#meudiv").load("core.php", { 'action': 'atualizar' } );
O método .html do Jquery vai inserir o código da imagem dentro do conteúdo do seu div, e ela ficará lá até o .load terminar, ou seja, quando seu script concluir o processamento.
É uma dica simples, mas que já vi muita gente complicando pra ter o mesmo resultado.


