Jquery ajax-loading-image

[Mike89]

Hi

Ich suche und probiere jetzt schon seit zwei stunden und komm nicht weiter, hoffe ihr könnt mir helfen.

Ich habe ein Menü und den Hauptbereich der Seite. Wenn ich auf einen Menüpunkt klicke wird per ajax der Inhalt in den Hauptbereich geladen. Das funktioniert super.

Ich möchte nun ein Bild anzeigen falls das laden etwas länger dauert, und zwar neben dem Menüpunkt der gerade ausgewählt wurde.

Ich habe bis jetzt eine Klasse(Lade-Grafik + Position im Menü) die ich einblende wenn der Menüpunkt angeklickt wird.
Und in der Datei die geladen wird steht am Ende der Code um die Klasse und somit das Ladebild wieder zu entfernen. Das funktionert auch.

  
index.php  
$('#menu1').click(function(){  
  $('#menu1').addClass('menupunkt_load_grafik');  
  $("#hauptbereich").load("s1.php");  
});		  
$('#menu2').click(function(){  
  $('#menu2').addClass('menupunkt_load_grafik');  
  $("#hauptbereich").load("s2.php");  
});		  
  
s1.php  
..  
$('#menu1').removeClass('menupunkt_load_grafik');  
  
s2.php  
..  
$('#menu2').removeClass('menupunkt_load_grafik');  

Nun möchte ich aber die Ladegrafik erst einblenden wenn das laden länger als zB 500ms dauert.

danke für eure hilfe

mfg mike