Warten mit Funktionsausführung bis Bild geladen

[IneX]

Hallo

Bin nun schon einige Stunden an einem "Problem" mit JavaScript. Ich habe eine Seite, auf welcher ein Bild geladen wird (durch meine init() JS Funktion) und zusätzlich diverse Bilder-Thumbnails in einer Art Gallerie ebenfalls durch eine JS Funktion geladen werden (show_thumbs()).

Problem: wenn die Seite aufgerufen wird, werden zuerst die Thumbnails geladen und angezeigt, bevor das "Hauptbild" angezeigt wird. Dies möchte ich ändern.

Und zwar habe ich das mit der .complete Statusabfrage des Hauptbildes versucht. Meiner Meinung nach müsste ich einen Loop erzeugen (setInterval()) der jeweils den .complete Status des Bildes prüft, und, sobald "complete = true", die Funktion zum Erstellen der Thumbnail-Gallerie aufruft.

document.interval = setInterval(check_img_status(), 500);
function check_img_status() {
 if (document.images['hauptbild'].complete) {
  clearInterval(document.interval);
  show_thumbs();
 }
}

Dies hat nicht funktioniert. Also wollte ich mich auf den onLoad Event des "Hauptbild" verlassen. Dies stellte mich aber vor Probleme, bzw. führte wieder zu einer setInterval-Überprüfung, weil die Funktion zur Ausgabe der Thumbnails erst weiter unten im HTML-Body erfolgt.

_________________________
|                         |
|     show_hauptbild()    | <-- zuerst laden
|                         |

show_thumbs()
_________________________

Das mein setInterval NICHT funktioniert stimmt zwar nicht ganz: es wird nämlich 1 mal ausgeführt. Es erfolgt einfach keine Wiederholung.

Kann mir jemand helfen dieses Problem zu lösen? Habt ihr andere Lösungsansätze, die funktionieren könnten?

Besten Dank