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. agora veja o Exemplo Loader do Google 

Rafael Clares

Comments

  1. By rodrijos

    Responder

  2. By Vagner

    Responder

  3. Responder

  4. By José

    Responder

  5. By clares

    Responder

  6. By José

    Responder

  7. By jonas augusto de oliveira

    Responder

  8. By clares

    Responder

  9. By Junior

    Responder

  10. Responder

  11. Responder

  12. By Fabio

    Responder

    • Responder

  13. By alvim

    Responder

  14. Responder

    • Responder

  15. Responder

  16. By Myrhay

    Responder

  17. By Mauricio

    Responder

  18. By Mauricio

    Responder

  19. Responder

  20. By ADM

    Responder

Perguntas duplicadas ou cujo a resposta esteja nos comentários serão ignoradas.
Comentários com códigos serão ignorados(para isso, use o pastebin.com e informe aqui o link).
Faça sua pergunta e "aguarde" ser aprovada para aparecer no blog.
Aguarde sua resposta, ela não é em tempo real, tenha paciência!

Deixe seu comentário