lo normal es justo antes de la instrucción
$.post (o $.ajax o $.get o la que gastes para hacer la llamada)
pones algo así
$('body').append('<div id="overlay" style="position:absolute;top:0px; left:0px;height:100%;width:100%;-moz-opacity:0.6;opacity:0.6;filter: alpha(opacity=50);background-color:#000;"><img src="./img/loading.gif" /></div>');
o sea, creas una especie de cortina transparente grisacea por encima de la web justo antes de realizar la llamada, que lleve el gif dentro, y entonces en el callback de la función ajax
$.post(archivo,data, function(respuesta){
$("#overlay").remove();
});
Es decir, te cargas esa 'cortina', así durante el rato que tarda la llamada, se vé el gif, y después se lo carga
Por cierto, esta xorrada la suelo usar bastante
http://ajaxload.info/