Criando um loading javascript para o seu site
Fazer um site ou blog o mais leve possível tem que ser uma busca constante por parte de desenvolvedores de páginas web, porém, nem sempre podemos evitar de ter uma página mais pesada que irá demorar mais de abrir. Páginas que podem conter muitas imagens ou uma quantidade grande de conteúdo, gifs animados por exemplo.
Talvez, nesse caso, você prefira exibir inicialmente um gif animado mostrando que a página está sendo carrgada e só depois de todo o conteúdo lido é que a página será exibida toda de uma vez.
Pode não parecer, mas o usuário tende a ter mais paciência vendo uma mensagem de página carregando do que ver a página abrindo aos poucos lentamente, isso dá uma impressão maior de lentidão, porque o processo já está acontecendo e o usuário está vendo em tempo real a demora em carregar, enquanto com um loading, aos olhos do usuário o processo de abertura da página ainda não começou.
Podemos criar um loading javascript com relativa simplicidade, porém muito eficiente.
Usaremos uma class css e uma pequena função javascript de apenas duas linhas.
O truque consistirá em envolver todo o conteúdo da página por um conjunto de divs que ficará inicialmente oculto e outro conjunto de divs acima ou abaixo do conteúdo, mas fora deste, que conterá o gif animado do loading.
Vamos ao código da nossa css:
<style type="text/css">
.imgpos {
position:absolute;
left:50%;
top:50%;
margin-left:-110px;
margin-top:-60px;
width:200px;
height:200px;
z-index:2;
border:double #0033cc 4px;
}
</style>
A css acima irá centralizar a gif do loading de maneira fixa, independente da resolução do monitor.
Não perca essa oportunidade de aprender Javascript com jQuery de forma eficiente, não simplesmente como um manual de referência, que joga todo o conteúdo sobre o leitor sem mostrar casos reais de uso, mas de forma didática e aplicações úteis, clique aqui e aprenda Javascript e jQuery de forma eficiente
Veja que eu posicionei a div absolutamente e centralizei À 50% tanto na altura quanto na largura, mas é preciso fazer uma correção de margens, para descontar as dimensões da imagem. Se a imagem tivesse um pixel, essa correção não seria necessária.
Agora vamos a nossa função javascript:
<script language="JavaScript">
function mostra(){
if(window.onload ){
document.getElementById('lendo').style.display="none"
document.getElementById('conteudo').style.visibility="visible"
}
}
window.onload=mostra
</script>
O que é feito aqui é algo bem simples.
Quando a função for executada a div que contém a gif do loading e que inicialmente aparece visível, será ocultada, ao mesmo tempo que a div que cerca todo o conteúdo e que inicialmente estará invisível será exibida.
Perceba que para a div do conteúdo eu optei por visibility ao invés de display, pois assim o espaço que o conteúdo ocupa será mantido mesmo sem este estar visível.
É só uma prevenção, não significa que se fosse usado display teria algum problema.
O evento window.onload é quem determina que a função javascript só será executada depois de lido todo o conteúdo.
Agora vamos para o nosso código html, mas antes você pode baixar um gif animado do loading aqui: Preloading gif
<div id="lendo">
<img src="preloader.gif" alt="preloading-javascript" border="0">
</div>
<div id="conteudo" style='visibility: hidden'>
Conteúdo completo da página
</div>
A primeira div abriga a gif do loading e estará visível imediatamente e na segunda você colocará todo o conteúdo da página que ficará invisível até que o mesmo seja totalmente lido e apresentado simultâneamente.
Para poder perceber o efeito, principalmente offline, precisará colocar algumas imagens bastante pesadas para que o tempo de carregamento demore um pouco. Coloque pelo menos uns 5MB de imagens se for testar offline.
Agora crie uma página html com a estrutura básica. Entre as tags <head> e </head> coloque primeiro o código css e depois o código javascript
Entre as tags <body> e </body> coloque as divs do loading e do conteúdo
Qualquer dúvida é só postar um comentário.
Aproveite e aprenda também como fazer uma galeria de imagens simples em javascript Álbum simples em Javascript
Até a próxima.
