[JQuery] Afficher une image de chargement le temps qu'une requete AJAX se fasse

Bonjour, je suis actuellement en train de créer un moteur de recherche pour un site. j'utilise AJAX pour vérifier sans actualisation de la page si le terme recherché existe. Donc lorsqu'on entre un mot dans une zone de texte, on sait si ce mot existe dans la base de données. Il s'affiche par conséquent "Aucun résultat trouvé" ou "1 (ou plusieurs) résultat(s) trouvé(s)". Cependant il peut y avoir quelques secondes (max 2 ou 3) avant que la phrase ne s'affiche. j'aimerais que durant ce temps une image de chargement (style ici) s'affiche.
Voici les différents bouts de code:
Le formulaire

Code:

1
2
3
4
5
6
7
<select name="place"  >
 <option value="contenant">Contenant... </option>
    <option value="commencant">Commençant par...</option>
 
    <option value="finissant">Finissant par...</option>
   </select>
<input type="text" size="20" name="pseudo" />  <span class="info"></span>

Le fichier js inclus dans le <head></head>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
 
$(document).ready(function(){
$("input").focus(function(){
var info_form=$(this).next(".info");
info_form.empty();
});
$("input").blur(function(){
   var name=($(this).attr("name"));
   var value=($(this).attr("value"));
   var info_form=$(this).next(".info");
   if(value==undefined)
   {
     info_form.append("<span class='rouge'>Veuillez saisir un terme à rechercher.</span>");
   }
   else if(name=="pseudo")
   {
   	$.ajax({
        type: "GET",
        url: "verif_pseudo.php?pseudo="+value,
        success:function(data){
        if(data==0)
        {
          info_form.append(" <span class='rouge'>Aucun résultat ne correspond à votre recherche \"" + value + "\".</span>");
        }
        else
        {if(data==1){
          info_form.append(' <span class="vert">' + data + ' résultat a été trouvé. <input type="submit" value="Rechercher l\'oiseau ' + value + '"/></span>');}
          else
          {
          	  info_form.append(' <span class="vert">' + data + ' résultats ont été trouvés. <input type="submit" value="Rechercher l\'oiseau ' + value + '"/></span>');
 
          }        }
        }
     });
   }
 
});	
});

Et enfin la page verif_pseudo.php

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
 
<?php
if(isset($_GET["pseudo"]))
{
$pseudo=$_GET["pseudo"];
 
$adresse = 'localhost:8889';
$nombdd = 'root';
$motdepasse = 'root';
$database = 'oiseaux';
mysql_connect($adresse, $nombdd, $motdepasse) or die (mysql_error());
mysql_select_db($database) or die (mysql_error());
 
$pseudo_exist=mysql_query("SELECT * FROM oiseaux WHERE nom='".$pseudo."'") or die (mysql_error());
$answer = mysql_num_rows($pseudo_exist);
if($answer>0)
{
echo "1";
}
else
{
echo "0";
}
mysql_close();
}
else
{
echo "non non !";
}
?>

Merci beaucoup d'avance.