Skip to content

Simples loading com Jquery

24 agosto 2011

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.

From → Programacao

One Comment
  1. vitor permalink

    Dica simples, detonou!!!!

Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

%d blogueiros gostam disto: