Preload de Página
Autor: guilherme henrique | Publicado: 2011-12-25T15:46:00-08:00

Vamos ver&nbsp;como fazer&nbsp;um Preload como o do Google.
Olá,&nbsp;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&nbsp; (index.html)
&lt;html&gt;
&nbsp;&lt;head&gt;
&nbsp;&nbsp; &lt;title&gt; Loader :: &lt;/title&gt;
&nbsp;&nbsp;&nbsp;&nbsp; &lt;script src=”load.js”&nbsp; type=”text/javascript”&gt;&lt;/script&gt;
&nbsp;&nbsp;&nbsp;&nbsp; &lt;link&nbsp; href=”load.css” type=”text/css” rel=”stylesheet”&gt;
&nbsp; &lt;/head&gt;
&nbsp;&nbsp;&nbsp; &lt;body&gt;
&nbsp;&nbsp; &lt;div id=”conteudo”&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;!– -aqui vai todo o conteudo do site –&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;a href=”index.html”&gt;Testar novamente&lt;/a&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;iframe src=”http://news.google.com.br”&gt;&lt;/iframe&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!–&nbsp;funcao que ira criar o elemento div&nbsp; loader –&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;!– esta chamada pode ser a ultima linha dentro do body –&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;script&gt;loading()&lt;/script&gt;&nbsp;
&nbsp;&lt;/body&gt;
&lt;/html&gt;
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&nbsp;mais que 1 segundo para carregar&nbsp;dando  tempo aparecer o&nbsp; texto “Carregando…”. Não vá me colocar um iframe na  sua&nbsp;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()
{
&nbsp;&nbsp;&nbsp; //criando um novo elemento div
&nbsp;&nbsp;&nbsp; x = document.createElement(“div”)
&nbsp; &nbsp;//atribuindo o id ao novo elemento
&nbsp; &nbsp;x.id = “loader”
&nbsp;&nbsp; //adicionando conteudo formatado pelo CSS na div loader
&nbsp;&nbsp; x.innerHTML&nbsp;&nbsp; = &nbsp;’&lt;div id=”info” class=”info”&gt;’
&nbsp;&nbsp; x.innerHTML += &nbsp;’&lt;p&gt;Carregando…&lt;/p&gt;&lt;/div&gt;’
&nbsp;&nbsp;&nbsp;// nova div ira aparecer depois da div conteudo
&nbsp;&nbsp;&nbsp;conteudoDiv = document.getElementById(“conteudo”)
&nbsp;&nbsp;&nbsp;//inserindo a div loader dentro do body e apos a div conteudo
&nbsp;&nbsp;&nbsp;document.body.insertBefore(x, conteudoDiv)
}
//função aguarda a pagina carregar para alterar
//propriedade display do elem. fazendo sumir
window.onload = function(){
&nbsp;&nbsp;&nbsp; //obtendo as propriedades do elemento div conteudo
&nbsp;&nbsp;&nbsp; obj2 = document.getElementById(“conteudo”)
&nbsp;&nbsp;&nbsp; //exibindo a div conteudo (display none no CSS)
&nbsp;&nbsp;&nbsp; obj2.style.display = ‘block’
&nbsp; &nbsp;//obtendo as propriedades do elemento div loader
&nbsp;&nbsp; obj = document.getElementById(“loader”)
&nbsp;&nbsp; //removendo o conteudo da div loader
&nbsp;&nbsp;&nbsp; obj.innerHTML = “”
&nbsp; &nbsp;//ocultando a div loader apos o carregamento da pagina
&nbsp;&nbsp; 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;&nbsp;&nbsp;
text-align:center;
}
Como perceberam o que acontece é que a o atributo DISPLAY do elemento DIV Conteudo dentro do&nbsp;BODY em primeira instância está definida no CSS como NONE,&nbsp;fazendo com que seu conteúdo&nbsp;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&nbsp;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.
&nbsp;É isso, não há muito segredo nesse exemplo, nada mais justo agora do que ver funfando!
Mas só uma coisa antes, se&nbsp;esse exemplo lhe ajudar por favor comente. agora veja o Exemplo Loader do Google
&nbsp;via blog do Rafael Clares