1

No evento onloaddo 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.

3
  • Como estás a criar o conteúdo do site? É HTML estático? que espaço ocupa esse loading.gif? a tela toda como uma camada por cima do site?
    – Sergio
    Commented 12/11/2016 às 21:22
  • É HTML estático, e esse loading.gif é centralizado no meio da tela, mas é só 200x200 px.
    – Nicolas S.
    Commented 12/11/2016 às 21:26
  • 1
    Se usar jQuery é muito fácil pois está tudo pronto, basta usar $('#conteudo').show("slow"), podes ver mais exemplos aqui: api.jquery.com/show Commented 12/11/2016 às 23:35

1 Resposta 1

1

Podes criar uma função à mão para fazer fade...

Podia ser algo assim:

function fade(el, tipo) {
    for (var i = 0; i <= 100; i++) {
        setTimeout(function(nr) {
            var val = tipo == 'out' ? (100 - nr) / 100 : nr / 100;
            el.style.opacity = val;
            if (tipo == 'out' && nr == 100) el.style.display = 'none';
            else if (tipo == 'in' && nr == 0) el.style.display = 'block';
        }, 10 * i, i);
    }
}

function carregar() {
    fade(document.getElementById("preload"), 'out');
	fade(document.getElementById("conteudo"), 'in');
}
setTimeout(carregar, 500);
div {
    position: absolute;
    left: 50%;
    top: 100px;
}
<div id="preload">Preload</div>
<div id="conteudo" style="display: none;">Conteudo</div>

ou fazer isso com classes CSS e transition: opacity 0.5s;, porém a mudança de display: block; para display: none; tem de ser feita por JavaScript.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .