JavaScript: Imagem de carregando ao acessar página

A ideia desse post é bem simples.

Mostrar um gif animado (ex: carregando…) antes da página ter sido completamente carregada.

Você deve criar 2 (dois) divs, 1 (um) que vai conter o gif animado e 1 (um) com o conteúdo da página.

No evento onload() é feito o efeito de mostrar/esconder os 2 (dois) divs.

Foi utilizado o setTimeout() para garantir a exibição do gif por pelo menos 2 segundos.

<html>
<head>
<style type="text/css">
#conteudo{ display:none; }
.center{ 
 position:absolute;
 top: 50%;
 left: 50%;
 margin-left: -75px; /*centralizando a imagem*/
 margin-top: -35px; /*centralizando a imagem*/
}
</style>
<script>
  window.onload = function(){
    document.getElementById('conteudo').style.display = "block";
    setTimeout(function() {
      document.getElementById('carregando').style.display = "none";
    }, 2000);
  }
</script>
</head>
<body>
<div id="carregando" class="center">
   <img src="http://goo.gl/prjII7" width="150" height="70" />
</div>
 
<div id="conteudo">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</body>
</html>

Veja o funcionamento, clicando aqui.

Até a próxima!

2 comentários em “JavaScript: Imagem de carregando ao acessar página

  • 7 de junho de 2016 em 20:49
    Permalink

    Amigo, não consigo fazer seu codigo funcionar junto com a consulta ao banco mysql. A consulta eh demorada, mas o gif so aparece quando a consulta ja foi realizada e eu gostaria de que enquanto o usuario esperasse a consulta o gif aparecesse. Acho que o window.onload so aciona a funcão depois que carrega tudo, inclusive a consulta.

    Resposta
    • 4 de agosto de 2016 em 8:04
      Permalink

      Olá Emerson.

      Como você está fazendo a busca no banco? via ajax?

      Resposta

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *