Skip to main content
adicionou 42 caracteres ao conteúdo
Fonte Link
user37626
user37626

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 */
    })();

})();

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.

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 */
    })();

})();

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 */
    })();

})();
adicionou 15 caracteres ao conteúdo
Fonte Link
user37626
user37626

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.

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 carregarfinalmente ser carregado, você pode exibir o conteúdonovamente. Eu recomendaria

*... Seria bom colocar todo o conteúdo da página em um novo container, assim facilita o trabalho...*

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 */
    })();

})();

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.

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 carregar, você pode exibir o conteúdo. Eu recomendaria colocar todo o conteúdo da página em um novo container, assim facilita o trabalho.

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 */
    })();

})();

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.

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 */
    })();

})();
adicionou 354 caracteres ao conteúdo
Fonte Link
user37626
user37626

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.

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 carregar, você pode exibir o conteúdo. Eu recomendaria colocar todo o conteúdo da página em um novo container, assim facilita o trabalho.

Agora, aqui vai o exemplo (esse código cairia melhor no fim de body"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 containerloadingContainer pelo seu parente
            loadingContainer.parentNode.removeChild(loadingContainer);
            // exibe a página
            pageContainer.style.display = "block";

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

})();

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 */
    })();

})();

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.

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 carregar, você pode exibir o conteúdo. Eu recomendaria colocar todo o conteúdo da página em um novo container, assim facilita o trabalho.

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 */
    })();

})();
Fonte Link
user37626
user37626
Carregando