Carregador em Javascript (Javascript Preloader) para sites

spike-spiegel · 21 de Dezembro 2011

É necessário se cadastrar para acessar o conteúdo.

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

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:

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

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

{else}

<body>

{/if}

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

Ela deve ficar na pasta "images".

Grande abraço

Entrar

Quem está por aqui 0 membros estão online

Carregador em Javascript (Javascript Preloader) para sites

Posts Recomendados

spike-spiegel 0

Link para o comentário

Compartilhar em outros sites

Fóruns

Todas Atividades

Lojinha WC

Informação Importante