nicht angemeldet
Warten mit Funktionsausführung bis Bild geladen
StruppiHallo
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
-
Hallo, IneX!
document.interval = setInterval(check_img_status(), 500);Schnellschuss:
Laut < http://de.selfhtml.org/javascript/objekte/window.htm> ist setInterval eine Methode von "window", nicht vom untergeordneten "document".
vielleicht versuchst du es einfach mal damit?freundl. Grüsse aus Berlin, Raik
--
Der IE ist wichtig. Man benötigt ihn, um sich einen Browser zu besorgen.
Resizeable Textarea 0.1d # docked JS-Console 0.1.1-
Schnellschuss:
Laut http://de.selfhtml.org/javascript/objekte/window.htm ist setInterval eine Methode von "window", nicht vom untergeordneten "document".
vielleicht versuchst du es einfach mal damit?Hi Raik
Danke für deinen Vorschlag. Wenn ich setInterval dem window unterordne, wird jeweils eine leere Seite angezeigt und ebenfalls das Intervall nur 1 mal ausgeführt.
-
Hallo, IneX!
Wenn ich setInterval dem window unterordne, wird jeweils eine leere Seite angezeigt und ebenfalls das Intervall nur 1 mal ausgeführt.
Ich rate mal: Du hast das Script im Kopf notiert? Entweder mit "onload" im body warten, bis die seite geladen ist (mir ist allerdings so, als würde "onload" auch auf die bilder warten?), oder das Setzen des Intervals in eine Funktion verpacken und diese erst durch ein Script am Ende der Seite aufrufen, wenn die Seite halt schon soweit geladen ist, dass die Elemente existieren, auf die Dein Script zugreifen soll.
(alles aus der Erinnerung "da war doch mal was?". Ich "stochere" auch grad im "Nebel". ;-) )freundl. Grüsse aus Berlin, Raik
--
Der IE ist wichtig. Man benötigt ihn, um sich einen Browser zu besorgen.
Resizeable Textarea 0.1d # docked JS-Console 0.1.1
-
Ich rate mal: Du hast das Script im Kopf notiert?
Ja, und zwar steht die Funktion im Scriptfile welches im HTML-Header included wird.
Entweder mit "onload" im body warten, bis die seite geladen ist (mir ist allerdings so, als würde "onload" auch auf die bilder warten?)
Das ist korrekt, deshalb suche ich eine andere Lösung. Ich sehe das Problem darin, dass die Funktion um die Thumbnails zu laden im Body steht und bevorzugt wird.
, oder das Setzen des Intervals in eine Funktion verpacken und diese erst durch ein Script am Ende der Seite aufrufen, wenn die Seite halt schon soweit geladen ist, dass die Elemente existieren, auf die Dein Script zugreifen soll.
Genau das habe ich doch in dem Skriptauszug in meinem Post gemacht?
-
-
-
-
Hallo, IneX!
Dies hat nicht funktioniert. Also wollte ich mich auf den onLoad Event des "Hauptbild" verlassen.
Laut < http://de.selfhtml.org/javascript/sprache/eventhandler.htm#onload> ist der onload-Eventhandler nur in <frameset> und <body> erlaubt, nicht in <img>. Dein erster Ansatz ist also schon der richtige.
Wenn Du in Zukunft bei solchen Problemen die Doku noch einmal liest (manches Detail dort fällt einem vieleicht erst beim dritten Mal auf und bringt den gesuchten "aha!"-Effekt ;-) ), lässt sich manche stundenlange Suche sicherlich verkürzen. :-) Ging mir auch schon so. *schmunzel*
freundl. Grüsse aus Berlin, Raik
--
Der IE ist wichtig. Man benötigt ihn, um sich einen Browser zu besorgen.
Resizeable Textarea 0.1d # docked JS-Console 0.1.1
-
Laut http://de.selfhtml.org/javascript/sprache/eventhandler.htm#onload ist der onload-Eventhandler nur in <frameset> und <body> erlaubt, nicht in <img>. Dein erster Ansatz ist also schon der richtige.
Funktioniert aber seit Netscape 3 auch im Image Tag in allen mir bekannten Browsern. Kann also ohne Probleme verwendet werden.
Struppi.
-
-
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.
Vergiss es complete ist etwas unzuverlässig und funktioniert in manchen älteren Browsern gar nicht.
Nimm den onload Event. wobei ich aber dein Problme damit nicht verstanden habe.
Struppi.
-
Nimm den onload Event. wobei ich aber dein Problme damit nicht verstanden habe.
Meine Funktion show_thumbs() liefert direkt eine Ausgabe. Beispiel:
function show_thumbs() {
/* code der die thumbs holt */
document.write(thumbs);
}Wenn ich nun im onLoad-Event des <img>-Tag diese Funktion aufrufe, schreibt er mir ja die Thumbnail Galerie in den <img>-Tag rein...
Wobei mir jetzt die Idee kommt, einfach die Ausgabe zwischen ein <div> oder ähnliches ausgeben zu lassen...?
-
Wenn ich nun im onLoad-Event des <img>-Tag diese Funktion aufrufe, schreibt er mir ja die Thumbnail Galerie in den <img>-Tag rein...
nur wenn das onload event sofort gefeuert wird. Aber auch ansonsten ist document.write() in dem Falle nicht sinnvoll, das hast du aber schon gemerkt.
Struppi.
-
-
-
Problem gelöst:
die Funktion show_thumbs() wird mit dem onLoad-Event des <img>-Tags aufgerufen.
Inder Funktion selber findet keine direkte HTML-Ausgabe (mit document.write()) statt, sondern das HTML wird zuerst in einen String geschrieben und am Schluss einem bestehenden Element via .innerHTML zugewiesen.
Nun werden die Thumbnails erst geladen und angezeigt, wenn das Hauptbild vollständig geladen wurde!
Beispiel:
HTML:
<img src="images/1.jpg" onLoad="javascript:show_thumbs()" />
<p id="thumbnails"></p>JavaScript:
function show_thumbs() {
var html = "<table width="640" cellpadding="3" cellspacing="0"><tr>";
html = html + "<td align="center" valign="middle">bild1</td>";
html = html + "<td align="center" valign="middle">bild2</td>";
html = html + "</tr></table>";document.all.thumbnails.innerHTML = html; //Achtung: all geht nicht unter Mac
}-
Moin
document.all.thumbnails.innerHTML = html; //Achtung: all geht nicht unter Mac
daher wäre hier das Ansprechen des Elements mit der ID thumbnails (zB. <div id="thumbnails">) sinnvoller über
document.getElementById("thumbnails").innerHTML = html;
das sollte auch der Mac verstehen und all die anderen Browser, die all nicht kennen.Gruß
rfb
-