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