No termino de entender tu problema. En principio todo parece estar bien (asumiendo que la respuesta llega del servidor bien).
Lo unico que veo, es que tienes dos contenedores (supongo que escondidos con CSS o ocultado previamente con jquery) uno para el resultado (result) y otro para la carga (loading). Pero... esos contenedores segun pones estan vacios, por lo que seguramente se muestren y se escondan correctamente, pero como no hay nada que cambie la aparecia, pues no se nota efecto alguno.
añade el mensaje "ENVIANDO" dentro del div de loading asi:
Código HTML:
<center><div id="loading">ENVIANDO</div><div id="result"></div></center>
Aunque personalmente, no lo haria de la forma que lo haces, si no que simplicaria el proceso a un unico contendor y simplemente haria el $().ajaxStart() y una vez terminada la funcion ajax, carga el resultado en el mismo contenedor (al ejecutar la funcion .html() sobre un contenedor, cambias todo su contenido, por lo que al meter el resultado el mensaje de "ENVIANDO" desaparecera.
seria una cosa asi:
Código:
<center><div id="result"></div></center>
Código:
<script language="javascript" src="jquery-1.3.min.js"></script>
<script language="javascript">
$(document).ready(function() {
$().ajaxStart(function() {
$('#result').text('ENVIANDO...');
})
$('#form').submit(function() {
$.ajax({
type: 'POST',
url: $(this).attr('action'),
data: $(this).serialize(),
success: function(data) {
$('#result').html(data);
}
})
return false;
});
})
</script>
Si en lugar de cargar el simple texto de "ENVIANDO..." quieres meter una imagen, (tipicas rallitas de carga) usa html()
Código:
$().ajaxStart(function() {
$('#result').html('<img src="img/loading.gif" alt="ENVIANDO..." />');
})
Prueba y ya nos comentaras que tal te fue. Suerte!