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

  • 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
    Diese Signatur wird bis auf weiteres Bestreikt!

  • #2
    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)

    Kommentar


    • #3
      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!
      Diese Signatur wird bis auf weiteres Bestreikt!

      Kommentar

      Lädt...
      X