1

Gostaria de colocar um loading screen com .gif em minha pagina .html, pois a pagina esta muito pesada. Por favor, se alguém puder me ajudar ficarei muito grato.

Página ser adicionado o loading screen: http://natupote.net16.net/

2
  • Da uma olhada nesse post vai te dar uma ideia do que fazer. Commented 31/08/2016 às 16:06
  • Cara, não estou percebendo lentidão ao abrir a página. A lentidão aparentemente está por causa da latência da resposta do seu serviço de hospedagem.
    – viana
    Commented 31/08/2016 às 16:22

1 Resposta 1

3

Há várias maneiras de fazer isso, mas é comúm ter um container visível na página, qual é removido até que o documento se carregue completamente (pode ser diferente de acordo com o tipo de navegação do site).

Quando me refiro à "container", refiro ao elemento que contém o conteúdo visível enquanto a página está em carregamento ainda, onde você iria colocar uma imagem *.gif como esperado.

Se fosse dessa maneira você teria que esconder o conteúdo da página que está em carregamento ainda, simplesmente com display: none em CSS, daí, quando o documento finalmente ser carregado, você pode exibir novamente.

*... Seria bom colocar o conteúdo da página em um container...*

Agora, aqui vai o exemplo (esse código cairia melhor no fim de "body", pois lá os elementos já teriam sido declarados antes):

(function() {
    var loadingContainer = document.getElementById('loading-container');
    var pageContainer = document.getElementById('page');

    (function checker() {
        // checa se o documento foi carregado
        if (document.readyState === "complete") {
            // remove o loadingContainer pelo seu parente
            loadingContainer.parentNode.removeChild(loadingContainer);
            // exibe a página
            pageContainer.style.display = "block";

        } else setTimeout(checker, 20);
        /* window.requestAnimationFrame poderia dar problemas */
    })();

})();

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 .