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

  2. By Vagner

  3. By Ederson

  4. By José

  5. By clares

  6. By José

  7. By jonas augusto de oliveira

  8. By clares

  9. By Junior

  10. By Roberto

  11. By Fabio

  12. By alvim

  13. By Alisson

  14. By Myrhay

  15. By Mauricio

  16. By Mauricio

  17. By Cássio

  18. By ADM

%d blogueiros gostam disto: