Loading screen with gif in loading page html

There are several ways to do this, but it's common to have a container visible on the page, which is removed until the document loads completely (it may differ depending on the type of site navigation).

When I refer to the "container", I mean the element that contains the visible content while the page is still loading, where you would put a * .gif image as expected.

If it were this way you would have to hide the content of the page that is still loading, simply with display: none in CSS, hence, when the document finally loads, you can view it again.

* ... It would be nice to put page content in a container ... *

Now, here's the example (this code would look better at the end of "body" , because there the elements would have been declared before):

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

})();