Você precisa colocar o conteúdo pesado da sua página em um container, um div por exemplo, e a image de loading em outro, assim:
<div id="carregando"></div>
<div id="conteudo">
... aqui vai o conteúdo do site ...
</div>
Então você exibe o div com a imagem e esconde o div com o conteúdo.
No evendo document.ready, quando todo o documento estiver carregado, você inverte, esconde a imagem e exibe o conteúdo:
<script type="text/javascript">
$('#carregando').show();
$('#conteudo').hide();
$(document).ready( function() {
$('#carregando').hide();
$('#conteudo').show();
});
</script>
A imagem você seta no css, e deixe com position: absolute
para posicionar onde você quiser:
#carregando {
background: url("https://i.sstatic.net/MnyxU.gif") center no-repeat;
position: absolute;
height: 100%;
widht: 100%
}
Basicamente é isso.