Skip to main content
1 de 4
user avatar
user avatar

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.

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.

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');

    (function checker() {
        // checa se o documento foi carregado
        if (document.readyState === "complete") {
            // remove o container pelo seu parente
            loadingContainer.parentNode.removeChild(loadingContainer);

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

})();
user37626