Preloader em JavaScript para site - Tutorial

Locked
User avatar
spikespiegel
Joomla! Explorer
Joomla! Explorer
Posts: 287
Joined: Sat Jan 22, 2011 4:34 am
Contact:

Preloader em JavaScript para site - Tutorial

Post by spikespiegel » Mon Jul 25, 2011 4:33 pm

Carregador em Javascript (Javascript Preloader) para sites



Este 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>:




Code: Select all

/* Web development and mastering tips at http://webtips.blogsome.com (Please keep this) */

<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.visibility = '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:

Code: Select all

<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...<br /><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:

Code: Select all

{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}

 



Leia mais em (Página do Script original): http://webtips.blogsome.com/javascript- ... z1NnrPYcEF

A imagem do preloader está abaixo, basta salvá-la:

http://mghospedagem.com/tutoriais/jspre ... oading.gif

Ela deve ficar na pasta "images".



Grande abraço.

Locked

Return to “Off-topic”