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!
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.
Olá Emerson.
Como você está fazendo a busca no banco? via ajax?
tbm aconteceu comigo. para funcionar como desejas deves tirar o tempo de esperar na função setTimeout. desse modo ele espera o tempo do processamento do navegador.