Martin Miethke: Zwei Bilder laden innerhalb einer Funktion

Beitrag lesen

Guten Abend alle miteinander,

in einem Iframe wird eine Leiste mit Thumbnails dargestellt; Klick auf ein Thumbnail soll (per JavaScript) das betreffende Bild in ein Bildobjekt im übergeordneten HTML-Dokument laden. Gleichzeitig soll darunter in einem Absatz der dazugehörige Text erscheinen (wer's sehen will: URL s.o.).

Das funktioniert eigentlich sehr gut; aber bei einer langsamen Verbindung dauert es eine Weile, bis nach einem Klick das nächste Bild geladen wird, während der neue Text sofort da ist. Da ich das ziemlich verwirrend für die Betrachter finde, habe ich ein einfaches GIF in der gleichen Größe erstellt (loading.gif), das einfach nur den Text "Bild wird geladen" zeigt. Dieses Bild soll nun mit der Funktion, die das "richtige" Bild lädt, zuvor geladen werden:

function show(i) {
 imgName = "bilder/loading.gif";
 txt = "";
 parent.show(imgName, txt);
 imgName = path + "IMG_" + imgs[i].slice(0,4) + ".jpg";
 txt = imgs[i].slice(5);
 parent.show(imgName, txt);
}

Die Funktion show(imgName, txt) im übergeordneten Dokument sieht so aus:

function show(imgName, txt) {
 document.bild.src = imgName;
 document.getElementById("BU").innerHTML = txt;

}

Leider funktioniert das nicht so wie gewünscht, denn loading.gif wird überhaupt nicht angezeigt. Das Verhalten nach einem Klick auf ein Thumbnail ist so, als ob die ersten drei Zeilen der Funktion show(i) einfach übersprungen würden.

Wo liegt der Fehler?

Herzliche Grüße
Martin