Breite und Höhe von Bildern auslesen

[Tobias]

Hallo
Ich habe ca. 300 Bilder, deren Höhe und breite ich gerne auslesen möchte. Ich dachte mir, das sei kein Problem mit JavaScript, aber ich komme einfach nicht auf einen grünen Zweig...

Mein Code: (Auszüge)

function Go() {
 for(var i = 1; i <= Bildanzahl; i++) {
  Bildsetzen(i);
  hoehe[i] = window.document.images[0].height;
  breite[i] = window.document.images[0].width;
 }
 Ausgabe(); //gibt die beiden Arrays aus (das klappt!)
}

function Bildsetzen(nr) {
        .... //Pfad+Namen+nr+Endung erkennen
 window.document.images[0].src = Pfad+Name+nr+Endung;
}

Das Problem:

Wenn ich nun das File ausführe, so sind alle Werte gleich und zwar so, wie vom ersten Bild! Ich habe also den Verdacht, dass das Bild noch gar nicht geladen wurde, bis ich die Daten lese!!
Wie kann ich also die Daten erst lesen, wenn das Bild richtig Angezeigt wird?

[Kube]

Hiho,

Wenn ich nun das File ausführe, so sind alle Werte gleich und zwar so, wie vom ersten Bild!

das läßt vermuten, daß alle Bilder (wenn überhaupt) dieselbe Ressource haben.

Ich habe also den Verdacht, dass das Bild noch gar nicht geladen wurde, bis ich die Daten lese!!

dann wären height und width = 0 bzw. undefined bzw. abhängig vom Defaultbildchen.

Wie kann ich also die Daten erst lesen, wenn das Bild richtig Angezeigt wird?

obigen Tatbestand könnte man prüfen. Evtl. auch den onError-Handler dazunehmen.

Gruss,
Kube

[Marc Reichelt]

Hi!

Ich versuche mal, mir das ganze aus der Sicht des Browsers vorzustellen...
Also, dein Browser läd das erste Bild in dein <img>-Tag rein (also erstellt er ein neues img-Objekt mit der Breite und der Höhe des ersten Bildes).
Diese Werte des img-Objekts sind nach einmaliger Festlegung immer konstant, egal welche Größe das darauffolgende Bild haben möchte.
Das ist der Grund warum du immer die gleiche Höhe und Breite bekommst.

Es gibt aber einen Trick, mit dem du das ganze machen kannst (von dem Sinn wollen wir hier lieber nicht diskutieren, es ginge mit PHP viel einfacher):

Du schreibst anstelle dem <img>-Tag so etwas hin (HTML-Code):

<p id="pbild">
</p>

Per Script kannst du dann folgendes machen (JavaScript-Code):

document.getElementById("pbild").innerHTML="<img src=""+Pfad+Name+nr+Endung+"" name="bild">";

Damit lädst du das jeweilige Bild, der Browser hat dann einfach nur das Bild in das <p>-Tag geschrieben.

Und dann kannst du per Script (hoffentlich) auf die Höhe und Breite des Bildes zugreifen.

(ACHTUNG: Ich würde an deiner Stelle auch mit dem onLoad-Event arbeiten, sonst kann es wirklich sein dass du gar keine Höhe und Breite raus bekommst, da der Browser das Bild noch nicht geladen hat)

Ich wünsche dir viel Glück!

Marc Reichelt || http://www.marcreichelt.de/

[Kube]

Hallo Marc,

Also, dein Browser läd das erste Bild in dein <img>-Tag rein (also erstellt er ein neues img-Objekt mit der Breite und der Höhe des ersten Bildes).
Diese Werte des img-Objekts sind nach einmaliger Festlegung immer konstant, egal welche Größe das darauffolgende Bild haben möchte.

also wenn ich Tobias richtig verstanden habe, ist es _nicht_ immer dasselbe img-Element.
Oder?

Gruss,
Kube

[Marc Reichelt]

Hi!

also wenn ich Tobias richtig verstanden habe, ist es _nicht_ immer dasselbe img-Element.
Oder?

Nein, denn der Browser erstellt mit dem <img>-Tag ein neues Objekt, IN DAS dann die Bilder immer wieder reingeladen werden.
Meine Methode mit der innerHTML-Zuweisung löscht das alte <img>-Objekt und legt ein neues an.

cu

Marc Reichelt || http://www.marcreichelt.de/

[karl]

hallo tobias
in deinem scrißpt finde ich immer images[0] sollte da nicht der zähler sein?

function Go() {
 for(var i = 1; i <= Bildanzahl; i++) {
  Bildsetzen(i);
  hoehe[i] = window.document.images[0].height;

hoehe[i] = window.document.images[i-1].height;  // das -1 weil schleife bei 1 bilderindex aber bei 0 neginnt

breite[i] = window.document.images[0].width;

breite[i] = window.document.images[i-1].width;

}
 Ausgabe(); //gibt die beiden Arrays aus (das klappt!)
}

function Bildsetzen(nr) {
        .... //Pfad+Namen+nr+Endung erkennen
window.document.images[0].src = Pfad+Name+nr+Endung;

window.document.images[nr].src = Pfad+Name+nr+Endung;

}

klappts ?
karl :-)´