yo se que ya paso mucho tiempo desde que hicieron la pregunta, pero aqui tienen la solucion, ya que tambien me tope con este problema y se que le será util a alguien como lo fue para mi.
en codigo html
<div id="esperar" style="position:relative; text-align:center; background-color:#FFF;z-index:5;filter:alpha(opacity=60);-moz-opacity:.60;opacity:.60; width:100%; vertical-align:middle; visibility:hidden">
<img src="imagenes/botones/cargar3.gif" id="tiempo" align="middle" width="100" style="vertical-align:middle"/>
</div>
//mi div tiene una transparencia del 60% de color blanco para que se vea mejor el gif de carga.
javascript
la solucion es poner en el evento onsubmit al final de la funcion javascript lo siguiente:
enviar() //funcion llamada en el submit del formulario
{
cargar=document.getElementById('esperar');
//cargar es mi id del div que esta oculto con la imagen y lo pongo visible hasta el final.
tem=document.getElementById('tiempo');
//tiempo es mi "id" de la imagen gif que hace del loader. que es cargar3.gif
cargar.style.visibility='visible';
setTimeout('tem.src = "imagenes/botones/cargar3.gif"', 200); //recarga la imagen despues de pulsar el boton submit
}