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