Mostrar uma mensagem durante o carregamento do sistema com jQuery

Boa tarde a todos,

Para quem desenvolve para o ambiente WEB alguma vez já se deparou com algum problema gerado por uma requisição AJAX que deu problema devido ao conteúdo da página ter sido totalmente carregado. Para amenizar esse nós podemos colocar uma mensagem sobreposta ao conteúdo da página avisando ao usuário que o conteúdo está sendo carregado.

Com ou sem o uso da biblioteca jQuery nós podemos controlar o evento ‘ready’, mais eu particularmente prefiro utilizar o jQuery para fazer isto. Nada mais é que quando o conteúdo DOM da página estiver totalmente pronto nós iremos executar alguma ação qualquer, logo temos a seguinte situação:

  1. Colocar um código HTML (div, p, table, etc.) que ficará sobreposto ao conteúdo do seu site, sistema, etc.;
  2. Após o carregamento total da página removemos este conteúdo com Javascript(puro, jQuery, mootools, etc.);

Mensagem HTML

Criamos uma DIV logo após a tag BODY do seu documento, e esta DIV colocamos uma classe de posição absoluta e que tem um zIndex superior aos outros elementos da página. Não sou um expert em CSS, mais eu utilizei essa classe CSS para fazer isso:

Na página eu vou ter mais ou menos isso:

Evento ready do DOM da página

Com a biblioteca jQuery eu digo que ‘ao carregar’ totalmente o DOM da página, que execute uma determinada função/ação, logo eu vou colocar esse código antes do </body> da minha página:

Dicas

Como eu utilizo a biblioteca jQuery-UI, eu utilizei a classe CSS “.ui-widget-overlay” para fazer aquele efeito modal para a mensagem de carregamento do sistema.Abaixo está um exemplo de como ficou no sistema que estou desenvolvendo:

screenshot_div_carregamento

Janela modal mostrando o carregamento da página.

Para não ficar em toda tela aparecendo ‘rapidinho‘ o esquema de carregamento, vocẽ pode mapear apenas as telas que contenham um carregamento maior de scripts, no meu caso foi somente em 3 telas onde eu carregava os scripts da API de mapas da Google.

Referências

http://jqueryui.com/demos/dialog/

http://api.jquery.com/ready/

Javascript
  • junior

    Carlos, tenho uma página onde mostro um relatório e as vezes essa consulta demora um pouco, então queria mostrar algo como vc fez, sendo que o modal se fecharia qdo o relatório ficasse pronto, ou seja durante a consulta no banco, se demorar aparece o modal com a mensagem e assim o usuário sabe que o relatório está sendo gerado, pq como estou fazendo o usuário pode clicar no botão que gera o relatorio novamente, sendo que o relatório ainda nao foi nem gerado, queria exatamente inibir isso. No caso como eu faria isso ? para que ele fechasse o modal qdo o relatorio estivesse pronto ?

    • Opa Junior,

      Se você tem um botão que faz uma consulta via AJAX é fácil, por exemplo, quando o usuário clica no botão e um conteúdo AJAX é renderizado em uma DIV qualquer você pode fazer o seguinte:

      $('#botao').bind('click', function(){
      $('#div-resposta').html("Aguarde, processando o relatório.....");
      $.post("/url-relatorio/", {parametros: parametros}, function(data){
      $('#div-resposta').html(data); // somente coloca o conteúdo do relatório após o processamento do relatório.
      })
      });

      Se for um botão que submita para uma página que retorna por exemplo um PDF para download, vocẽ pode dar um ‘disabled’ no button, para que o usuário não fique clicando impacientemente, essa solução também vale para o AJAX.

      Ainda se for um submit para uma nova página, e tenha uma demora, você pode fazer algo do tipo, ao clicar no submit, limpar a página atual, ou então inserir uma DIV por jQuery que coloca uma mensagem de aviso ao usuário, exemplo:

      $('#meu-formulario').bind('submit', function(){
      $('#div-alvo-para-mensagens').html("Aguarde, processando o relatório.....");
      return true;
      });

      Se você quiser, com Java eu sei que tem gente que faz, com PHP eu não sei, mas alguns relatórios PDF podem demorar horas para serem gerados, isso é devido ao número de dados das consultas SQLs, lógicas de cálculos, etc., tem aplicações que fazem uma fila de requisições de relatórios, que ficam disponíveis para download após forem totalmente processados.

      Voltando ao que você perguntou inicialmente, o modal é simples, siga a especificação da documentação do jQuery UI para dialogs, coloque de acordo com as suas necessidades.

  • mariana

    Olá, sou iniciante em jquery, gostaria do código completo que mostra esta mensagem em tela, há como você me passar?

    Att, mariana.

    • Bom dia Mariana,

      O código é bem simples :), aqui está ele:


      $(document).ready(function(){
      // Remove a div de carregamento....
      $('.ui-widget-overlay, #ui-div-carregamento').fadeOut('fast');
      });

      Basicamente esse trecho de código é invocado quando a página estiver totalmente carregada…nada mais do que apenas ocultar a div preta semi-transparente.

      Vou dar uma refatorada neste tutorial ou então criar um plugin para o jQuery assim acho que ficaria mais didático e simples de entender e usar :)

  • mariana

    Ok. Se poderes, me envia a página .html completa, com a chamada do arquivo JQUERY pois não tenho certeza se fiz corretamente. Mande para o meu e-mail, mariana_ferreira_bortolato@hotmail.com

    Obrigada!

  • Gustavo

    Ola amigo. tem como me enviar um exemplo pronto? obrigado! gustavogomes10@gmail.com
    Abracos!

  • Caçador de Filha-da-Puta

    Merda. Lixo. Até minha filha faz melhor…

    • carlosspohr

      Ao seu gosto.

  • Eduardo Oliveira

    Cara, o artigo ficou bom e bem didático, só faltou um exemplo real para quem não tem tanto conhecimento e só precisa implementar essa funcionalidade.

  • Ricardo

    muito bosta