jQuery().waiting(), deixando o tempo carregamento menos constrangedor

jQuery().waiting(), deixando o tempo carregamento menos constrangedor

Boa noite pessoal,

A coisa mais chata que vemos acontecer nas mais diversas aplicações WEB espalhadas mundo a fora, é um layout todo bagunçado devido ao tempo de carregamento da página, e ainda no pior dos casos é quando o navegador não terminou de baixar todos os arquivos CSS e/ou JS e o usuário clica em um botão AJAX que resulta um erro ou página em branco…isto é foda horrível, mas muitas vezes não é culpa do desenvolvedor ou designer, mas as vezes a infra do usuário final banda larga da Oi seja muito lenta…mesmo assim isto é algo que tem ser tratado durante o desenvolvimento ou então nas fases de testes.

Para contornarmos esses problemas, podemos usar algumas marotagens disponibilizadas pelos navegadores, como por exemplo o atributo ‘onload‘ do elemento body do HTML padrão. Este cara permite que a gente possa embutir lógicas nele durante o carregamento. Só que nós não podemos simplesmente colocar qualquer coisa ali devido ao fato da ordem dos carregamentos ou então outros Javascripts que podemos ter na nosso documento. Complicado não..?

Bom a ideia que eu proponho com este plugin para o jQuery é algo bem simples e que resolve grande parte deste problema, como o MacGyver falaria, nós basicamente precisamos de uma classe CSS e de um plugin pro jQuery…

O pulo do gato com uma CSS bem aplicada

Esse é o pulo do gato nessa marotagem pessoal é que se vocês olharem outros frameworks Javascript por aí como o ExtJS, jQuery UI, etc. verão que para aplicar o efeito modal eles usam uma série de DIVs sobrepostas e transparentes ou não. Estas DIVs sobrepostas ao conteúdo que ainda está sendo carregado e renderizado fica por baixo delas e naturalmente os elementos cobertos perdem a interatividade com o input do usuário devido a hierarquia do documento, ou seja, você não consegue pegar uma flor que esteja debaixo de um azulejo, a não ser que você tire ele de cima da flor.

Para nós fazermos isso devemos colocar uma DIV logo depois da abertura do elemento BODY do documento, mais ou menos assim:

Para que esta DIV se torne diferente das demais, vamos aplicar uma classe CSS nela, logo:

Feito, agora devemos escrever um CSS maroto pra dar o efeito de carregamento que desejamos, logo temos isso:

A classe CSS é bem tranquila, nela apenas nos asseguramos de alguns detalhes como:

  • a posição sendo absoluta para manter as suas características;
  • Largura e altura para ocupar todo o espaço da tela do navegador;
  • o z-index com um número bem grande para ficar acima de todos os elementos da página;
  • As configurações para garantir uma transparência que seja compatível em vários navegadores;
  • Um gif para simular o carregamento;

Se executarmos a nossa página neste momento vamos ter alguma coisa assim pessoal:

efeito-carregamento

O gran finale com o jQuery

Bom, se nós não fizermos nada, esta DIV ficará eternamente aí, temos que fazer ela sair somente quando a página tiver sido totalmente carregada. Mas como nós sabemos por meio do Javascript se a página foi totalmente carregada ? Boa pergunta..eu não sei, mas eu sei que o jQuery tem um método que já faz esse tratamento, o jQuery.ready. Este método é capaz de fazer a mesma associação dos binds, ou seja, podemos fazer pilhas de execuções de maneira fácil.

Voltando ao nosso caso, vamos aplicar um efeito de esmaecimento usando o método jQuery.fadeOut(). Este método irá fazer com que a nossa DIV marota vá esmaecendo até sumir totalmente e deixar todo o conteúdo acessível a interações com o usuário.

Simples não ?! Agora vamos deixar esta solução mais robusta e elegante…vamos criar um plugin específico para essa lógica. Mas porque ? Pode parecer perda de tempo mas se pensarmos na empregabilidade futura, no reuso da solução vocês verão que é uma boa idéia. Vou dar algumas situações que poderiam acontecer:

  • Disparar algum evento quando a DIV terminar de esmaecer;
  • Fazer requisições AJAX enquanto carrega o documento;
  • Ao ir esmaecendo ir trocando a mensagem de carregamento;

Basicamente o nosso plugin jQuery ficaria assim:

E vamos colocar o nosso plugin pra executar no lugar daquele código anterior lá e passando a velocidade da saída do fadeOut:

A nossa versão final ficou assim malandragem:

Download

Por enquanto é só, qualquer dúvida, crítica, etc. usem a área de comentários.
Abraços.
Blog Javascript
  • André Sardinha

    Gostei muito brother…. Parabens, vou usar com certeza nas minhas areas administrativas…!! hehehe

    • carlosspohr

      Se quiser customizar ele, CSS, textos, etc.. é bem simples também :)

  • Robinho

    obrigado!! muito simples de compreenção… parabens, ajudou muito.

  • Jorge S. Lima

    Gostei muito do artigo! parabéns!

    Só uma duvida, tenho aqui um formulario o user entra com os dados e clica em um botão, que envia as informações via POST pra uma outra pagina php que faz uma query no meu BD, envia um email pra mim com a solicitação efetuada.

    Como o php precisa de tempo pra processar a query no BD (pode ser uma query demorada dependendo da solicitação) gostaria de implementar essa solução para que os usuarios do sistema em questão não fechem o navegador antes de concluir o processo colocar uma mensagem tipo não fechem pelo amor de deus (rs).

    Porem eu não conheço muito javascript nem jquery na realidade to estudando isso atualmente e fiquei perdido nesse meu problema

    Tentei fazer o que vc disse no artigo só que mensagem de carregando aparece apenas por alguns segundos e ainda porcima só depois que o processamento foi concluido e ela não é mais necessaria(rsrs)

    no meu caso a unica solução seria o AJAX? ou eu q to fazendo algo errado no codigo mesmo?

    Grato.

    • carlosspohr

      Buenas Jorge,

      Acho que nesta situação a melhor opção seria mesmo utilizar um AJAX, logo porque você pode fazer uma ‘gambiarra alto nível’ fazendo o seguinte:

      1 – Na div que receberá o resultado desse processamento você coloca alguma mensagem qualquer, como por exemplo ‘Carregando…’;

      2 – O código ajax ficaria +- assim:

      $("#resultado").html("Carregando..."):

      $.post(URL, parametros, function(data){
      // Algum tempo depois..
      $("#resultado").html(data): // Aqui teria alguma mensagem pro usuário.
      });


      Não sei se consegui explicar direito.

      Abraços.