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

3 Comentários
  1. vitor permalink

    Dica simples, detonou!!!!

  2. Cara bateu na trave … eu preciso carregar um conteudo html de uma outra pagina enviando dados de um form

    • Daí você precisa de uma requisição mais completa, usando o método $.ajax e passando os campos do form.

      var data = $(‘#myForm’).serializeArray();
      $.ajax({
      type: “POST”,
      url: “action.php”,
      data: data,
      dataType: “json”,
      success: function(data) {
      console.log(“Tudo ok”);
      },
      error: function() {
      console.log(“Erro”);
      }

Deixe um comentário

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: