IE8 - Bilder nachladen "zu schnell"

[kuerbis42]

Hallo zusammen,

ich werde noch affig - man sucht stundenlang einen Fehler und stoesst dann auf folgendes:

  
function showimage(imagename) {  
  
         tmpimg =new Image();  
         tmpimg.src = imagename;  
         newx = tmpimg.width;  
         newy = tmpimg.height;  
         tmpimg.free;  
  
         document.getElementById('bigpicture').src = imagename;  
         document.getElementById('bigpicture').width = newx;  
         document.getElementById('bigpicture').height = newy;  
         return;  
      }  

Aufruf der Fkt: bei Klick auf ein anderes Bild
Zweck der Funktion: nachladen des übergebenen Bildes und Größe anpassen

Fehler (nur beim IE8 getestet):
nach

  
tmpimg.src = imagename;  

erhalte ich bei newx und newy jeweils 0,
füge ich aber z.B. ein

  
         tmpimg.src = imagename;  
         alert('toller IE');  
         newx = tmpimg.width;  
         newy = tmpimg.height;  

ein, dann stehen die "richtigen" Werte drin.

Ist der IE jetzt zu schnell? Wie kann ich dafür sorgen, daß der IE eine kleiine Pause zum "überlgen" hat - mit "wait(10ms)" oder ähnlichem habe ich es noch nicht hinbekommen.
Der FF (4.x) macht es anstandslos.

PS: nicht meckern - ist Q&D und soll ja nur das Problem veranschaulichen.

Danke,
Frank

[Der Martin]

Hallo,

ich werde noch affig - man sucht stundenlang einen Fehler und stoesst dann auf folgendes:

auf eine ganz normale Sache, wenn man mal drüber nachdenkt.

tmpimg =new Image();
         tmpimg.src = imagename;

Diese beiden Zeilen weisen den Browser an: Wenn du mal Zeit dafür hast, lade bitte das Bild nach.

newx = tmpimg.width;
         newy = tmpimg.height;

Dass dessen Abmessungen in dem Moment noch nicht verfügbar sind, dürfte klar sein. Wann hätte der Browser das Bild laden sollen?

Fehler (nur beim IE8 getestet):

Teste es mal mit anderen Browsern - du wirst sehen, die können auch nicht hexen.

tmpimg.src = imagename;
         alert('toller IE');

Beim Ausführen der alert-Methode wartet der Browser auf eine Benutzeraktion. In der Zeit kann er das bestellte Bild laden.

newx = tmpimg.width;
         newy = tmpimg.height;

Und dann stehen auch dessen Metainformationen zur Verfügung.

Der FF (4.x) macht es anstandslos.

Das wäre aber sehr erstaunlich ...

So long,
 Martin

[suit]

Der FF (4.x) macht es anstandslos.

Das wäre aber sehr erstaunlich ...

Vielleicht hat man bei Firefox 4 den Cache endlich repariert. :)

[suit]

Wie kann ich dafür sorgen, daß der IE eine kleiine Pause zum "überlgen" hat - mit "wait(10ms)" oder ähnlichem habe ich es noch nicht hinbekommen.

Auf complete warten und dann erst die Dimensionen auslesen - solange das Bild nicht gelanden ist, kann es durchaus 0 groß sein sofern nicht irgendwo am anfang der Datei die Dimensionen stehen und ausgewertet werden können.

[JürgenB]

Hallo kuerbis42,

function showimage(imagename) {

tmpimg =new Image();
         tmpimg.src = imagename;
         newx = tmpimg.width;
         newy = tmpimg.height;
         tmpimg.free;

document.getElementById('bigpicture').src = imagename;
         document.getElementById('bigpicture').width = newx;
         document.getElementById('bigpicture').height = newy;
         return;
      }

  
Inmage unterstützt den onload-Event, ich würde es daher so lösen (ungetestet):  
  
~~~javascript
  
function showimage(imagename) {  
  
         tmpimg =new Image();  
         tmpimg.onload = function() { // anonyme Funktion, die aufgerufen wird, wenn das Bild geladen ist  
           newx = tmpimg.width;  
           newy = tmpimg.height;  
           tmpimg.free;  
  
           document.getElementById('bigpicture').src = imagename;  
           document.getElementById('bigpicture').width = newx;  
           document.getElementById('bigpicture').height = newy;  
         }  
         tmpimg.src = imagename;  
         return;  
      }  

Gruß, Jürgen

[Felix Riesterer]

Lieber kuerbis42,

ein neues Bildobjekt, sei es mittels new Image() oder mittels document.createElement("img") erzeugt, hat noch keine Bilddaten und damit noch keine Werte für Höhe und Breite (daher sind die Werte "0"), es sei denn, der Browser hat die Resource bereits im Cache gespeichert. Dann sind sinnvolle Werte sofort zu haben.

Daher gehe ich so vor:

function preloadImage(url) {  
    var img = new Image();  
    img.src = url;  
  
    if (img.width) {  
        // Bild im Cache  
        displayImage(img);  
    } else {  
        // Bild muss erst geladen werden  
        img.onload = function () {  
            display(img);  
        };  
        img.onerror = function () {  
            alert("Die Resource unter '"+url+"' konnte nicht geladen werden!");  
        };  
    }  
}

Liebe Grüße,

Felix Riesterer.

[molily]

Eingabe und Ausgabe, also auch das Laden von Inhalten, funktioniert in JavaScript immer asynchron und Ereignis-basiert.

Man »wartet« nicht, bis der Inhalt geladen ist, sondern registiert einen Event-Handler, der beim Erfolg gefeuert wird. Das gilt auch für das Laden von Bildern mit new Image. Dort wird das load-Ereignis gefeuert, also eine Handler-Funktion in der onload-Eigenschaft gespeichert:

function showimage (url) {  
   var img = new Image();  
   img.onload = function () {  
      var bigpicture = document.getElementById('bigpicture');  
      bigpicture.src = url;  
      bigpicture.width = img.width;  
      bigpicture.height = img.height;  
   };  
   img.src = url;  
}

Mathias

[Kuerbis42]

Besten Dank an alle.
Ich denke, mit den verschiedenen Versionen - sprich Eventhandling - wird es dann wohl funktionieren.

PS: der FF4 tut's wirklich ;-)

Zum "Nachladen": Nunja, ich dachte, wenn der Befehl

tmpimg.src = imagename;

kommt - dann lädt die Kiste das Bild, und wenn fertig, dann geht's weiter.

Aber dann ist es doch eher so, daß der IE (und andere) das Bild doch eher "nebenbei" laden und NICHT warten, bis fertig - es sei denn, man nimmt die Event-Geschichte. Wobei das natürlich kein Warten ist, sondern ein Reagieren.
Ich teste i.d.R. immer erst auf FF, wenn's da geht und z.B. beim IE nicht, dann suche ich die Fehler beim IE.

OK, vielen Dank, ich denke: geschlossen.

[suit]

Ich teste i.d.R. immer erst auf FF, wenn's da geht und z.B. beim IE nicht, dann suche ich die Fehler beim IE.

Seit dem IE 9 ist es möglicherweise schon fast eine Überlegung das wieder umgekehrt zu machen :)