Carregador em Javascript (Javascript Preloader) para sitesEste carregador foi desenvolvido para deixar que seus visitantes saibam que a página que eles estão prestes a ver está sendo carregada. O carregador irá sumir automaticamente assim que o carregamento da página estiver completo. Isso dá um pouco de ajuda aos visitantes dos atrasos frustrados, e os deixa saber que todo o processo de carregamento está ocorrendo.
Aqui está o truque para se fazer isso. (Eu tentei manter o código HTML tão simples quanto possível e consequentemente utilizei uma tabela dentro do Div principal. Por favor, substitua-o com o Div também, se desejar.
Caso #1: Caso você queira utilizar o carregador para toda a página:
1º passo:
Insira o javascript a seguir dentro da parte Tag <head>
Exemplo:
<head>
//Abaixo desta linha.
</head>:
<script type="text/javascript" language="javascript">
function is_loaded() { //DOM
if (document.getElementById){
document.getElementById('preloader').style.visibility='hidden';
}else{
if (document.layers){ //NS4
document.preloader.visibility = 'hidden';
}
else { //IE4
document.all.preloader.style.visib
ility = 'hidden';
}
}
}
//-->
</script>
2º passo:
Agora substitua a Tag <body> com:<body onload="is_loaded();">
3º passo:
Depois insira este código HTML bem abaixo da Tag que está dentro da página principal:
<div id="preloader" style="position:absolute; left:30%; top:290px; width:350px; height:120px; text-align:center"> <center> <div style="text-align:center; background-color:#fff; font-size:12px; font-family: Tahoma; font-weight: bold; color:#333; border: 4px solid #990000; padding: 4px;">Page loading...
<img src="/images/loading.gif" /></div> </center> </div>
É isso aí! De agora em diante seus visitantes irão ver um carregador enquanto a página está sendo carregada. Verifique também que dentro desse carregador eu não incluí nenhum GIF animado, filmes em flash, etc., para ter certeza de que o processo será bem rápido.
Caso #2: Caso você queira usar o carregador para alguma página em particular. Ao invés de inserir o código html (como no 3º passo) na página principal, insira-o na página em que deseja.
OU .. digamos que você queira usá-lo para as páginas /pagina-1/ e /pagina-2/
Insira este pequeno Smarty Code logo após a Tag </head> e pule o 2º passo:
{if $smarty.server.REQUEST_URI == '/page-1/' || $smarty.server.REQUEST_URI == '/page-1' || $smarty.server.REQUEST_URI == '/page-2/' || $smarty.server.REQUEST_URI == '/page-2'}
<body onload="is_loaded();">
{else}
<body>
{/if}
A imagem do preloader está abaixo, basta salvá-la:
Ela deve ficar na pasta "images".
Grande abraço
Tópico: Carregador em Javascript (Javascript Preloader) para sites (Lida 52 vezes)