……
Vamos ver como fazer um Preload como o do Google.
Olá, agora vamos ver como criar o preload mais conhecido da internet, o preload do google, isso mesmo aquela coisa minúscula e vermelha no canto direito da tela.
Vamos ao bom e velho HTML (index.html)
<html>
<head>
<title> Loader :: </title>
<script src=”load.js” type=”text/javascript”></script>
<link href=”load.css” type=”text/css” rel=”stylesheet”>
</head>
<body>
<div id=”conteudo”>
<!– -aqui vai todo o conteudo do site –>
<a href=”index.html”>Testar novamente</a>
<iframe src=”http://news.google.com.br”></iframe>
</div>
<!– funcao que ira criar o elemento div loader –>
<!– esta chamada pode ser a ultima linha dentro do body –>
<script>loading()</script>
</body>
</html>
Acima utilizei dentro do conteúdo da página (div conteudo) um iframe, nada de especial, foi apenas uma forma que encontrei de fazer com que a página demorasse mais que 1 segundo para carregar dando tempo aparecer o texto “Carregando…”. Não vá me colocar um iframe na sua página hein! Coloque o conteúdo normalmente, basta que estejam dentro da DIV conteudo. :)
Vamos ao arquivo JavaScript – salve-o como load.js
function loading()
{
//criando um novo elemento div
x = document.createElement(“div”)
//atribuindo o id ao novo elemento
x.id = “loader”
//adicionando conteudo formatado pelo CSS na div loader
x.innerHTML = ’<div id=”info” class=”info”>’
x.innerHTML += ’<p>Carregando…</p></div>’
// nova div ira aparecer depois da div conteudo
conteudoDiv = document.getElementById(“conteudo”)
//inserindo a div loader dentro do body e apos a div conteudo
document.body.insertBefore(x, conteudoDiv)
}
//função aguarda a pagina carregar para alterar
//propriedade display do elem. fazendo sumir
window.onload = function(){
//obtendo as propriedades do elemento div conteudo
obj2 = document.getElementById(“conteudo”)
//exibindo a div conteudo (display none no CSS)
obj2.style.display = ‘block’
//obtendo as propriedades do elemento div loader
obj = document.getElementById(“loader”)
//removendo o conteudo da div loader
obj.innerHTML = “”
//ocultando a div loader apos o carregamento da pagina
obj.style.display = ‘none’
}
Muito simples, mas foi a forma que encontrei de faze-lo, lembrando que eu também estou aprendendo e procurando explorar ao máximo os recursos do JS.
Vamos ver o arquivo CSS – salve-o como load.css
body{
margin:0px;
padding:0px;
}
#loader{
position:absolute;
width:100%;
height:600px;
}
#conteudo{
display:none;
}
.info{
width:100px;
float:right;
margin-right:2px;
margin-top: 2px;
}
.info P{
margin:0;
padding:3px;
background-color:red;
font:11px verdana;
color:#fff;
text-align:center;
}
Como perceberam o que acontece é que a o atributo DISPLAY do elemento DIV Conteudo dentro do BODY em primeira instância está definida no CSS como NONE, fazendo com que seu conteúdo não apareca no html, em seguida a chamada a função loading() é feita criando um novo elemento DIV dentro do BODY com o texto carregando e sua formatação no CSS, após o carregamento da página, nesse caso apenas um IFRAME, a DIV conteudo tem sua propriedade DISPLAY alterada para BLOCK, ou seja, passa a aparecer no HTML, após isso no window.onload a propriedade da DIV Loader que foi criada tem sua propriedade DISPLAY alterada para NONE, ou seja, deixa de aparecer e como essa div foi criada pelo javascript, mais precisamante pela função loading(), ela não aparece no código HTML.
É isso, não há muito segredo nesse exemplo, nada mais justo agora do que ver funfando!
Mas só uma coisa antes, se esse exemplo lhe ajudar por favor comente. agora veja o Exemplo Loader do Google
Rafael Clares
13 Comentários até o momento
Deixe um comentário
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <pre> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>
Testei aqui e funcionou certinho, valeu.
Comentário por rodrijos Fevereiro 14, 2008 @ 1:15 amValeu pela dica, mt interessante amigo!
Comentário por Vagner Fevereiro 14, 2008 @ 1:30 amLegal o teu blog. Tô lendo quase todos os posts.
Esse exemplo do loading não funcionou no Firefox, só no IE. :(
Comentário por Ederson Fevereiro 27, 2008 @ 7:14 pmCara, eu testei o negocio … e ficou show de bola..
ficou igualzinho o GOOGLE..
parabéns … e post mais coisas para nós aie blz flw
Comentário por José Fevereiro 27, 2008 @ 10:25 pmObrigado pelos comentários e excelente comentário o seu Ederson, realmente passei despercebido quanto ao firefox, o script ja foi corrigido e funciona no IE e no FireFox. Prometo que prestarei mais atenção antes de sair postando. Obrigado
Comentário por clares Fevereiro 28, 2008 @ 3:26 amesse tutor está muito bom .. continue assim
Comentário por José Março 3, 2008 @ 7:13 pmflw
eu não entendi muito bem…o primeiro arquivo
Comentário por jonas augusto de oliveira Março 17, 2008 @ 8:13 pmé o index.htm ? ou loader.htm?
Jonas
Jonas, o arquivo principal é o index.html, o “load.js” é o arquivo que contém o JavaScript, tem ainda o arquivo que contém o CSS e se chama “load.css”. Neste caso não existe o arquivo que você mencionou “loader.htm”. Obrigado por comentar.
Comentário por clares Março 17, 2008 @ 11:44 pmCara perfeito, tanto na explicação quanto no desempenho.
Parabens, e continue sempre nos trazendo novidades
Comentário por Junior Maio 14, 2008 @ 4:46 pmCara você está de parabéns…O que não da para acreditar e que esse tal de Rafael Cambuí deu um ctrl+c e ctrl+v no seu post…Ainda bem que você não deixou por memos…..Eu tb não….teu uma bronca lá no comments dele!!!
Comentário por Roberto Julho 6, 2008 @ 8:48 pmSucesso…
Cara… bacana demais seu post!! Abraço
Comentário por Lucas Moreira de Souza Agosto 25, 2008 @ 5:57 pmprimeiramente gostaria de agradecer pela iniciativa, parabéns! testei tudo funciono belezinha mas qdo uso o “onLoad=”MM_preloadImages” com o precarregamento no body ele aparece o carregando… carrega o site mas nao mostra. sabe de alguma solução ?
Comentário por Fabio Julho 13, 2009 @ 10:50 pmOlá Fabio, obrigado pelo comentário!
Então, isso ocorre porque você tem 2 coisas (funções) querendo fazer algo no mesmo momento, ou seja, no onLoad.
Comentário por Rafael Clares Julho 14, 2009 @ 12:10 pmO ideal é que você coloque os 2 dentro do mesmo onLoad e não 1 onload para cada.
Então, você pode retirar o seu onload do body e colocar no javascript, basta que coloque uma instrução após a outra, dessa forma será executada uma e delas primeiro. coloque o MM_preloadImages no arquivo Js ok. abs