JS: Bilder verändern wenn geladen..

[cebe]

Hi phpfriend.de Team

Ich bastel an ner Art Bildergallerie und habe ein Bild, das dynamisch mit Javascript geändert werden kann: Je nach Link, auf dessen ich klick ändert sich mein Bild und zeigt ein anderes an.

Jetzt zum Problem:
Ich will eine Blockierung machen, welche die Bildgrosse zurück stutzt, wenn z.B. die Bildhöhe über 500px beträgt! Den Bildwechsel und alles Habe ich bereits gemacht, allerdings habe ich probleme beim Überprüffen der Bildhöhe/breite..
Wenn die Bilddatei klein ist, kann die Bildhöhe/breite überprüffen, ist das Bild allerdings noch nicht ganz geladen zeigt es mir eine falsche Zahl an.
Ist es möglich, meine Bildhöhe-Überprüffunktion erst auszuführen, wenn das Bild ausgeladen ist?

Meine verwendeten Funktionen:

function zeige(url){
	document.getElementById('bild').src = url;
	transform();
}

Diese Funktion wechselt den Bilderpfad meines Dummy-Bildes!

function transform(){
	img_h = document.getElementById('bild').height;
	img_w = document.getElementById('bild').width;
	alert(img_h);	// Bildhöhe
	alert(img_w);	// Bildbreite
}

Diese Funktion soll die Bildhöhe/breite ausgeben! Zeit allerdings bei grösseren Bilddateien teilweise ein verfällschtes ergebniss an.

Hoffe irgendwer kann mir hier helfen

[Zergling-new]

document.getElementById('bild').complete // oder wars completed

Darüber erhältst du die Information, ob das Bild komplett geladen wurde. Das mußt du vor deiner Größenermittlung abprüfen. Wenn es false zurückgibt, musst du z.B. mit der Funktion setTimeout() nocheinmal prüfen, obs nach ner gewissen Zeit dann endlich geladen ist.

function transform() {
  if (document.getElementById('bild').complete) {
    img_h = document.getElementById('bild').height;
    img_w = document.getElementById('bild').width;
    alert(img_h);   // Bildhöhe
    alert(img_w);   // Bildbreite 
  } else {
    setTimeout('transform()', 100);
  }

(ungetestet)

[cebe]

Aye du bist echt genial, dank dir! (und noch dazu so schnell geantwortet) :]

Deine Lösung hat noch einen kleinen fehler, fehlt ne klammer aber sonst läufts einwandfrei:

function transform() { 
if (document.getElementById('bild').complete) { 
    img_h = document.getElementById('bild').height; 
    img_w = document.getElementById('bild').width; 
    alert(img_h);   // Bildhöhe 
    alert(img_w);   // Bildbreite 
  } else { 
    setTimeout('transform()', 100); 
  }
} // Fehlende klammer!