……
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
Testei aqui e funcionou certinho, valeu.
Valeu pela dica, mt interessante amigo!
Legal o teu blog. Tô lendo quase todos os posts.
Esse exemplo do loading não funcionou no Firefox, só no IE. 🙁
Cara, 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
Obrigado 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
esse tutor está muito bom .. continue assim
flw
eu não entendi muito bem…o primeiro arquivo
é 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.
Cara perfeito, tanto na explicação quanto no desempenho.
Parabens, e continue sempre nos trazendo novidades
Cara 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!!!
Sucesso…
Cara… bacana demais seu post!! Abraço
primeiramente 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 ?
Olá 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.
O 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
muito bom!!! era isso mesmo que eu estava procurando!! parabéns!! e muito obrigado!!ajudou muito, eu ainda fiz umas alterações nele pra mostrar uma imagem de carregando no centro da página!! vlw amigo
Otimo seu Tutorial! So nao consegui colocar o texto no centro da tela! Voce poderia me ajudar? Obrigado!
Alexandre, tem que alterar o CSS. Dá uma olhada no arquivo CSS ok.
Brother, parabéns.. ótimo mesmo! Fiz umas incrementações ficou show de bola. Vlw!
Manow, show de bola seu tuto, muito 10 mesmo…
Uma pergunta é possível no lugar da palavra eu colocar uma gif no centro da tela?
Valew show show…
Myrhay, dá para por imagem sim … até
Só funciona no servidor?
ok…deu certo aqui.
Ótimo script!
Funciona em Opera, Chromium/Chrome, Firefox, Midori, IE…
Gostei tanto que adaptei para ficar preencher a tela e coloco em quase todos os sites que faço.
100% valeu pela dica!