Vamos ver como fazer um Preload como o do Google.Ola, agora vamos ver como criar o preload mais conhecido da internet, o preload do google, isso mesmo aquela coisa minuscula 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 conteudo da pagina (div conteudo) um iframe, nada de especial, foi apenas uma forma que encontrei de fazer com que a pagina demorasse mais que 1 segundo para carregar dando tempo aparecer o texto Carregando.... Nao va me colocar um iframe na sua pagina hein! Coloque o conteudo normalmente, basta que estejam dentro da DIV conteudo. :)Vamos ao arquivo JavaScript salve-o como load.jsfunction 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)}//funcao aguarda a pagina carregar para alterar//propriedade display do elem. fazendo sumirwindow.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 tambem estou aprendendo e procurando explorar ao maximo os recursos do JS.Vamos ver o arquivo CSS salve-o como load.cssbody{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 e que a o atributo DISPLAY do elemento DIV Conteudo dentro do BODY em primeira instancia esta definida no CSS como NONE, fazendo com que seu conteudo nao apareca no html, em seguida a chamada a funcao loading() e feita criando um novo elemento DIV dentro do BODY com o texto carregando e sua formatacao no CSS, apos o carregamento da pagina, nesse caso apenas um IFRAME, a DIV conteudo tem sua propriedade DISPLAY alterada para BLOCK, ou seja, passa a aparecer no HTML, apos 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 funcao loading(), ela nao aparece no codigo HTML. E isso, nao ha muito segredo nesse exemplo, nada mais justo agora do que ver funfando!Mas so uma coisa antes, se esse exemplo lhe ajudar por favor comente. agora veja o Exemplo Loader do Google via blog do Rafael Clares Gostaria de saber quem te segue de volta no twitter? Saber os perfis abandonados e ate os