AJAX-Request stört Ersetzen von Bild

[DreiPunkt141592654]

Hallo Community

Ausgangslage:
Ich habe ein Formular erstellt, welches unter anderem entsprechend der Benutzereingaben eine AD-Abfrage durchführt.
Der Ablauf sieht dabei wie folgt aus:

• Die Benutzerin tippt etwas in ein Textfeld à la

 <input type='text' id='eingabe'>

ein.

• Durch Klicken auf ein Bild à la

<input type='image' src='search.png' id='suchBild' onclick='suchFunktion()'>

wird eine Funktion aufgerufen.

• Diese Funktion sendet einen AJAX-Request an eine PHP-Datei.
• Diese PHP-Datei führt die AD-Abfrage mittels ldap request durch und gibt die Antwort mittels echo-statements als Antwort auf den AJAX -Request zurück (responseText).
• Mit Javascript wird die Antwort des Servers in eine Javascript Variable geschrieben (à la

var antwort = ajaxRequest.responseText;

) und steht Javascript danach zur weiteren Verwendung zur Verfügung.


Dies funktioniert auch alles wie gewünscht.

Da die AD-Abfrage je nach Benutzereingabe einige (wenige) Sekunden daueren kann, möchte ich gerne, solange die AD-Abfrage läuft, das Bild (search.png) durch ein anderes (load.png) ersetzten.

Mein Code dazu:

function suchFunktion()
{
document.getElementById("suchBild").src = "load.png";
// restlicher Javascript Code
document.getElementById("suchBild").src = "search.png";
}

Problem:
Das Bild "load.png" wird nicht angezeigt, d.h. genaugenommen:

1. Setzte ich vor den AJAX-Request einen alert, sehe ich load.png.
2. Setzte ich einen alert nach den AJAX-Request, erscheint load.png erst, wenn auch der alert angezeigt wird (je nachdem mit durch den AJAX-Request (AD-Abfrage) bedingter Verzögerung)

Meine Frage:
Wie bringe ich Javascript dazu, "load.png" sofort bzw. immer anzuzeigen?

Bereits im Voraus danke für eure Hilfe
PI