Publicado em 11 de fev.

Imagem full na tela enquanto carrega + 5 segundos

Então eu já tenho o script de ficar uma imagem full enquanto a página não carrega, porém minha página é muito leve e queria acrescentar mais uns 5 segundo na imagem. O código eu peguei de um post daqui do fórum mesmo, segue ele:

<style>
 .oculta {display:none;}
 .normal {display:block;}
 .load {width:100%;height:100%;}
</style>
<script language="javascript">
 window.onload = function() {
 document.getElementById( "site" ).className = "normal";
 document.getElementById("carregando").className="oculta";
 }
</script>
 </head>
<body>
<div class="oculta" id="site">

<site>

</div>

<div class="normal" id="carregando" align="center">

<img>  </div> Como acrescentar 5 segundos na imagem? Desculpas pela falta de conhecimento...

Grato.

Discussão (5)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

Fiote· 11 de fev.

Troque:

window.onload = function () {
 document.getElementById("site").className = "normal";
 document.getElementById("carregando").className = "oculta";
}

Por:

window.onload = function () {
 setTimeout(function () {
 document.getElementById("site").className = "normal";
 document.getElementById("carregando").className = "oculta";
 }, 5000); // 5000 milisegundos = 5 segundos
}

José da Silvasauro· 12 de fev.

Ah valeu ursão!

Opa, e tem como eu colocar um fadein quando a imagem ta sumindo so por aqui?

Fiote· 12 de fev.

Dá sim, mas não existe fadein em javascript puro (que parece ser o que você está usando (parabéns pra você)).

Tem idéia de como implementar um efeito fadein?

José da Silvasauro· 14 de fev.

Ahh valeu mas criei um gif com o tempo certo da imagem.

William Bruno· 14 de fev.

FadeIn javascript puro:

http://tableless.com.br/criando-efeito-de-fadein-e-fadeout-com-javascript-puro/