Ankündigung

Einklappen
Keine Ankündigung bisher.

JS: Bilder verändern wenn geladen..

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • cebe
    hat ein Thema erstellt JS: Bilder verändern wenn geladen...

    JS: Bilder verändern wenn geladen..

    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:
    Code:
    function zeige(url){
    	document.getElementById('bild').src = url;
    	transform();
    }
    Diese Funktion wechselt den Bilderpfad meines Dummy-Bildes!

    Code:
    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

  • cebe
    antwortet
    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:
    Code:
    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!

    Einen Kommentar schreiben:


  • Zergling-new
    antwortet
    Code:
    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.

    Code:
    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)

    Einen Kommentar schreiben:

Lädt...
X