No evento onload
do meu site, eu carrego uma função em que faz um gif de loading que estava aparecendo, suma para que o conteudo do site apareça.
<body onload="carregar()">
<div id="preload">
<img src="_imagens/loading.gif">
</div>
<div id="conteudo">
//Aqui tem todo o site, cabeçalhos, rodapés, a interface inteira.
</div>
A função é essa:
function carregar(){
preload = document.getElementById("preload").style.display = 'none';
div = document.getElementById("conteudo").style.display = 'block';
}
Só que as coisas acontecem muito rápidas e o efeito não fica legal. Eu gostaria o gif sumisse com "fade" de 0.5s e o conteudo aparecesse com outro fade da mesma forma. Eu sei que isso é JQuery, só não sei fazer esse efeito.
loading.gif
? a tela toda como uma camada por cima do site?loading.gif
é centralizado no meio da tela, mas é só 200x200 px.$('#conteudo').show("slow")
, podes ver mais exemplos aqui: api.jquery.com/show