Javascript Image onload

Beispiel:
Beim Klick auf einen Link soll sich ein Overlay öffnen, in dem ein Bild angezeigt wird.

Das Overlay soll sich öffnen und zunächst eine „Loading“ Animation zeigen, so lange, bis das eigentliche Bild geladen ist und angezeigt werden kann.

Das Javascript:
loadImageObj = new Image();
loadImageObj.onload = function () {
/* nachdem das loading.gif geladen wurde, das Overlay anzeigen */
imageObj = new Image();
imageObj.onload = function () {
/* nachdem das gewünschte Bild geladen wurde,
das loading.gif gegen das gewünschte Bild austauschen */
};
imageObj.src = 'gewuenschtesbild.jpg';
};
loadImageObj.src = 'loader.gif';

Hinweis: Besonders wichtig ist, dass die Bild-Src erst nach der onload() Definition gesetzt wird, da sonst das Bild geladen wird, bevor das onload-Event definiert wurde! Je nach Browser kann dies sonst zu Problemen führen.

Nachtrag: Wenn das loading.gif ein (loop) animiertes Bild ist, führt dies im Internet-Explorer offensichtlich dazu, dass jeweils mit Ende, bzw. Beginn des neuen Loops das onload Event erneut ausgeführt wird, was zu einer Endlosschleife führt, das Overlay kann also nicht mehr geschlossen werden, da es direkt erneut geöffnet wird. In diesem Fall ist es wohl einfacher auf das onload für das loading.gif zu verzichten.