[jQuery] Mostrando imagen de carga al enviar un formulario

Buenas quiza a muchos les ha pasado que quisieran agregar una imagen al enviar un formulario, esto para que el usuario no se desespere tanto. Bueno esto es algo muy basico pero igual lo mostraré, para ello usaremos dos metodos de jQuery:

* show() - Muestra en bloque el selector que le indiques
* hide() - No muestra el selector que le indiques

Hay mejor documentacion sobre ellos en documentacion de la API de jQUery.

Ejemplo en vivo: http://jsfiddle.net/ojj1226b/

Digamos que tenemos un formulario como el siguiente:

<form action="" method="post">
    <h3>Formulario</h3>
    <input type="text" name="campo1" /><br />
    <button type="submit" name="enviar">
</form>

El cual enviamos por medio de PHP, pues queremos que cada vez que se procese el formulario muestre una imagen mientras se procesa... para ello crearemos un DIV en este caso lo llamaré loading.

El cual contiene la siguiente estructura:

<div id="loading">
  <img src="img/ajax-loader.gif" height="19" width="40">
</div>

Donde ajax-loader.gif es una imagen que usaremos, les recomiendo esta pagina: http://www.ajaxload.info/ con la cual pueden generar algunas imagen con transparencia en el fondo.

Por ultimo el codigo jQuery seria el siguiente:

$(document).ready(function(){
  $('#loading').hide();
  $('form').submit(function(){
    $('#loading').show();
  });
});

Y listo con eso podriamos mostrar una imagen. Se que es algo basico pero es algo que se utiliza mucho.