Preload de Página
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 para que eu possa continuar postando, muito obrigado e agora veja o Exemplo Loader do Google
Fonte: http://clares.wordpress.com
Gostei da maneira como você se expressa e transmite suas idéias.
Sua linha de criação de sites parece um pouco com a minha. Deve ser por isso que acho seu site tão interessante. Mas não copio nada!