Adrian: Abmasse eines Bildes erst beim zweiten Aufruf mit Werten

Hallo zusammen

Vorweg, ist speziell, wie schnell hier Threads geschlossen und ins Archiv fliegen... ich nehme Bezug auf diesen von mir gestarten Thread am 10.03.07: http://forum.de.selfhtml.org/archiv/2007/3/t148048/#m960342

Der Tipp war:

Dann solltest du abwarten, bis die Bildressource fertig geladen ist - onload, oncomplete und onerror sollten brauchbare Stichworte sein.

Ich habe dies nun wie folgt versucht zu lösen:

function bild(url) {
// Bildtag zusammensetzen

// Wenn keine URL übergeben wurde, diese abfragen
if (typeof(url) == "undefined") {
  url = prompt('Bitte den Link zum Bild eingeben','');
}

var myImage = new Image();
myImage.src = url;
myImage.oncomplete = bildtag(url, myImage.width, myImage.height);

}

function bildtag(url, width, height) {

var bildtag = '<img src="'+url+'" width="'+width+'" height="'+height+'" />';

insert(bildtag,'');

}

ob ich nun "myImage.oncomplete" oder "myImage.onload" nehme, der Effekt ist immer der gleiche. Und zwar wenn ich das erste mal die URL eines Bildes übergebe, sieht das Ergebnis so aus:

src="avatar_adrian.jpg" width="0" height="0" />

klicke ich gleich nocheinmal auf das Bild, werden die korrekten Grössenangaben ausgegeben:

src="avatar_adrian.jpg" width="96" height="96" />

und dabei spielt es keine Rolle, wie Gross das Bild ist, es ist immer dieser Effekt. Bis der Browser geschlossen wurde, wird von jedem Bild, nachdem einmal die Abmasse mit 0 ausgegeben wurden, die korrekten Abmasse dargestellt.

Hat einer von Euch eine Idee, wie man das besser lösen kann oder was an meinem Code falsch ist?
Danke viel mal...

Gruss
Adrian

  1. Hallo Adrian,

    ohne jetzt den Rest zu kennen:

    myImage.oncomplete = bildtag(url, myImage.width, myImage.height);

    hier rufst Du "bildtag" sofort auf und weist "myImage.oncomplete" den Rückgabewert von "bildtag" zu. Ich glaube, dass das nicht Deine Absicht war. Wenn "bildtag" der Eventhandler sein soll, geht das so:

    myImage.oncomplete = bildtag;

    aus den Übergabeparametern machst Du am einfachsten globale Variablen.

    Gruß, Jürgen

    1. myImage.oncomplete = bildtag(url, myImage.width, myImage.height);

      hier rufst Du "bildtag" sofort auf und weist "myImage.oncomplete" den Rückgabewert von "bildtag" zu. Ich glaube, dass das nicht Deine Absicht war.

      Danke für Deine Antwort!
      In der Tat, das war nicht die Absicht. In der anderen Antwort habe ich die Lösung erhalten: myImage.onload = function() { bildtag(this.scr, this.width, this.height) };

  2. Ich habe dies nun wie folgt versucht zu lösen:

    function bild(url) {
    // Bildtag zusammensetzen

    // Wenn keine URL übergeben wurde, diese abfragen
    if (typeof(url) == "undefined") {
      url = prompt('Bitte den Link zum Bild eingeben','');
    }

    var myImage = new Image();
    myImage.src = url;
    myImage.oncomplete = bildtag(url, myImage.width, myImage.height);

    oncomplete ist mir unbekannt, aber wenn du in JS einen Eventhandler benutzen möchtest musst du immer diesem eine Funktionreferenz zuweisen. Dieser wird im Fall des auftreten des eventes aufgerufen. In deinem Falle:

    myImage.onload = function()  
    {  
    bildtag(this.src, this.width, this.height);  
    };  
    
    

    Und die Zuweisung der .src Eigenschaft sollte danach erfolgen.

    Struppi.

    --
    Javascript ist toll (Perl auch!)
    1. [code lang=javascript]myImage.onload = function()
      {
      bildtag(this.src, this.width, this.height);
      };

      Super, besten Dank, das funktioniert perfekt :)