Ajax jquery inserire un loader per motore di ricerca

[paci]

Ciao a tutti, premetto che ho pochissime competenze su javascript, quindi mi scuso anticipatamente per gli eventuali svarioni.
Sto inserendo un motore di ricerca interno a un sito, i risultati della ricerca vengono mostrati in Ajax con la libreria jquery.
Mi piacerebbe inserire un'immagine loader che compaia durante l'elaborazione e venga nascosta al momento del completamento. Ho moto rovistato su internet e tentato varie soluzioni, soprattutto utilizzando dei div con sfondo immagine, ma non ci sono ancora riuscito. Lo script della chiamata è il seguente:

						$(document).ready(function() {  

						  $("form#searchhi").submit(function(){  
						    var testo = $("#testo").val();
						    var categoria = $("#categoria").val();  
						    var lingua = $("#lingua").val();
						    var tipoprod = $("#tipoprod").val();
						    document.searchhi.categoria.value = "";
						    $.ajax({  
						      url: "....",  
						      type: "POST",
						      data :"testo=" + escape(testo) + "&categoria=" + escape(categoria) + "&lingua=" + escape(lingua) + "&tipoprod=" + escape(tipoprod),
						      dataType: "html",
						      success: function(msg) {  
						        $("div#ricerca").html(msg)
						      },
						      error: function(){
						        alert("Chiamata fallita!!!");
						      } 
						    }); 
						    return false;  
						  });
						});

Qualcuno potrebbe essere così gentile da mostrarmelo corretto? Come ho premesso sono pressoché a digiuno di javascript.
Grazie

 

[Nefyt]

Prima della chiamata in ajax modifica il div e poi al success col risultato

 $("div#ricerca").html('Immagine o messaggio di loading');
						    $.ajax({  
						      url: "....",  
						      type: "POST",
						      data :"testo=" + escape(testo) + "&categoria=" + escape(categoria) + "&lingua=" + escape(lingua) + "&tipoprod=" + escape(tipoprod),
						      dataType: "html",
						      success: function(msg) {  
						        $("div#ricerca").html(msg)
						      },
						      error: function(){
						        alert("Chiamata fallita!!!");
						      } 
						    });

 

[paci]

Prima della chiamata in ajax modifica il div e poi al success col risultato

 $("div#ricerca").html('Immagine o messaggio di loading');
						    $.ajax({  
						      url: "....",  
						      type: "POST",
						      data :"testo=" + escape(testo) + "&categoria=" + escape(categoria) + "&lingua=" + escape(lingua) + "&tipoprod=" + escape(tipoprod),
						      dataType: "html",
						      success: function(msg) {  
						        $("div#ricerca").html(msg)
						      },
						      error: function(){
						        alert("Chiamata fallita!!!");
						      } 
						    });

Grazie Nefyt, ho fatto come mi hai consigliato e ottenuto quello che volevo