darauf warten dass ein Bild geladen wurde

[ernie]

Hallo zusammen,
ich lade ein Bild mit JavaScript
..

  
var myImg = new Image();  
myImg.src = "..";  

das anzeigen mittels einem canvas klappt nur dann, wenn ich den browser
a) aktualisiere oder
b) vor der quellzuweisung ein alert mache, dass das bild genug zeit hat zu laden

meine frage, wie kann ich erreichen dass das script solange wartet bis das bild geladen wurde
-eine while( !myImg.complete ){ .. } wollte ich vermeiden, oder geht es nicht anders ?

danke euch !

[JürgenB]

Hallo ernie,

meine frage, wie kann ich erreichen dass das script solange wartet bis das bild geladen wurde

auch Bilder kennen das onload-Event.

Gruß, Jürgen

[ernie]

hi Jürgen,
danke für den hinweis, das ist mir bekannt, jedoch wartet der aufruf dann auch nicht auf das bild sondern wird asynchron verarbeitet so wie ich das mit onload verstanden habe

ziel ist, sofern das bild geladen wurde, soll das script weiter ausgeführt werden

[Don P]

Hallo,

hi Jürgen,
danke für den hinweis, das ist mir bekannt, jedoch wartet der aufruf dann auch nicht auf das bild sondern wird asynchron verarbeitet so wie ich das mit onload verstanden habe

Wieso arbeitet es denn weiter? Weiss ja nicht, was du da programmiert hast, aber warum beendest du die Ausführung nicht einfach, nachdem die Bilsquelle zugewiesen ist. Das Programm kann dann vom onload-Event wieder geweckt werden und das Bild anzeigen.

So ist es doch eigentlich immer: Man klickt z.B. auf etwas (Event), daraufhin geschieht etwas und fertig, bis ein neuer Event stattfindet, für den sich ein Handler zuständig fühlt.

Gruß, Don P

[ernie]

der sinn dahinter :)
ich hab ein javascript objekt,
dieses zeichnet in dein definiertes canvas, auch bilder sollen in diesem canvas dargestellt werden

• das klappt auch, nur weiss ich nicht, wie ich auf das event - bild fertig geladen warten soll

setTimeOut oder setInvervall sind in dem fall auch nicht wirklich hilfreich, wäre wirklich toll wenn ihr eine lösung hättet

-mir gehts im grunde darum, wie warte ich darauf, dass das bild fertig geladen wurde, mir fällt leider keine lösung ausser wihle( !myImg.complete ){ .. } ein :\

[ChrisB]

Hi,

• das klappt auch, nur weiss ich nicht, wie ich auf das event - bild fertig geladen warten soll

Auf Events wird nicht „gewartet“, „warten“ tut man in JavaScript generell nicht.

Stattdessen schreibst du das, was passieren soll, wenn der Event eintritt, einfach in eine eigene Funktion/Methode - und rufst diese dann über den Eventhandler auf.

Schau mal hier vorbei: http://molily.de/js/event-handling-grundlagen.html

MfG ChrisB

[Don P]

Hallo,

der sinn dahinter :)
ich hab ein javascript objekt,
dieses zeichnet in dein definiertes canvas, auch bilder sollen in diesem canvas dargestellt werden

Ok.

• das klappt auch, nur weiss ich nicht, wie ich auf das event - bild fertig geladen warten soll

Während ein Script abgearbeitet wird, z.B. während des Zeichnens in dein canvas, ist der Browser für den Benutzer quasi eingefroren und es ist keine Interaktion mit der Seite möglich. Würde das Script "warten" und das Bild steht z.B. gar nicht zur Verfügung (Server down oder Modem kaputt oder sonst was), dann könnte man ewig warten und die Seite nicht mehr bedienen.

Es gibt aus gutem Grund keine Sleep-Funktion in JavaScript. So etwas wird über Events gelöst. Auch wenn dir das nicht gefällt, so ist es nunmal. Die Wartelösung mit der While-Schleife gefällt dir ja auch nicht, und das ist gut so. Es bleibt wirklich nur die Lösung über Eventhandler, glaub's einfach.

Gruß, Don P

[ernie]

k danke euch, dann muss ich meine programmiert art / denkweise anpassen

mal sehen wie man das lösen kann, momentan weiss ichs noch nicht

ich habe ein objekt, dieses zeichnet linien und das bild dann wieder linien,
wie ich dann nach dem event -bild geladen- weiter zeichne -weil die methode ja dann nach bild laden abgeschlossen sein müsste und das kommende zeichnen erst dann durchzuführen wenns soweit ist ( bild geladen), ist mir noch schleierhaft, zusaml das ganze in einem objekt stattfinden soll ohne, dass "lose" funktionen im JS rumschwirren

-http://molily.de/js/event-handling-grundlagen.html wird sich gleich mal angeschaut

[Don P]

Hallo,

wie ich dann nach dem event -bild geladen- weiter zeichne -weil die methode ja dann nach bild laden abgeschlossen sein müsste und das kommende zeichnen erst dann durchzuführen wenns soweit ist ( bild geladen), ist mir noch schleierhaft

Du mussst nur vor dem Bild-Laden den gegenwärtigen Zustand als Objekteigenschaften festhalten und auch festhalten (über ein beliebiges Flag im Objekt), dass es einen geladenenen Zustand überhaupt gibt.
Der Eventhandler ruft dann nach dem Bildladen die normale Zeichnen-Funktion deines Objekts auf, die anhand des Weitermachen-Flags natürlich bemerkt, dass sie vorher nicht ganz fertig geworden ist, und also mit den vorher festgehaltenen Werten (Stichwort Closure) weitermacht, wie es sich gehört.

Gruß, Don P

[Don P]

mal sehen wie man das lösen kann, momentan weiss ichs noch nicht

Irgendwie so vielleicht:

var paintObjekt = {  
  
  bilder: ["gesicht.jpg", "brust.jpg", "rücken.jpg", "arsch.jpg"],  
  
  werkzeuge: [Buntstift, Pinsel, Sprühdose],  
  
  zustand: {  
  
    farbe: "#000000";  
    werkzeugNr: 0,  
    bildNr: 0;  
    x: 0,  
    y: 0;  
  }  
  
  ladeBild: function(bildNr) {  
  
    var bildURL = this.bilder[bildNr],  
        bildElement = null;  
  
    /* hole bzw. erzeuge hier das bildElement */  
  
    if (!bildElement) { return; }  
  
    bildElement.onLoad = function(){ ZeichenObjekt.zeiche(); };  
  },  
  
  zeiche: function() {  
  
    var bilder= this.bilder,  
        bildZahl = bilder.length;  
  
    if (this.zustand.bildNr === bildZahl) { return; }  
  
    /* hier (weiter)zeichnen gemäß this.zustand */  
  
    var bildNr = this.zustand.bildNr++; // nächstes Bild  
    if (bildNr > bildZahl) { // falls schon alle geladen sind...  
      /* hier Zustand zurücksetzen */  
      return; // Ende Gelände.  
    }  
  
    ladeBild(bilder[bildNr]); // ...sonst Bild laden.  
  }  
};

Gruß, Don P

[ernie]

danke dir !
das ding dabei, die funktion ladeBild, ist lose udn gehört nicht zu dem objekt, die funktion sollte auch dem objekt gehören

..
this.bildElement.onLoad = function(){ this.zeiche(); };
..
oder
..
this.bildElement.onLoad = function(this){ thisObj.zeiche(); };
..

geht leider nicht

aber es geht wohl ohne "lose" funktionen wohl nicht, schade
danke dir !!

[EKKi]

Mahlzeit ernie,

nur eine Kleinigkeit - aber mit bedeutenden Auswirkungen:

this.bildElement.onLoad = function(){ this.zeiche(); };

"onLoad" ist keine gültige Bezeichnung für einen Event-Handler ... meinst Du vielleicht "onload"?

geht leider nicht

"Geht nicht" geht nicht.

MfG,
EKKi

[Don P]

Hallo,

"onLoad" ist keine gültige Bezeichnung für einen Event-Handler ... meinst Du vielleicht "onload"?

Ja klar, stimmt. Der Code hat auch noch andere Fehler. Hab' ihn nur mal so aus dem Ärmel geschüttelt, um das Prinzip zu zeigen. Wollte erst gar nicht so viel Code posten, aber halbwegs vollständig sollte er dann doch sein, sonst bringt's ja auch nix.

Wo war hier doch gleich wieder die Editierfunktion ;) ?

Gruß, Don P

[Matthias Apsel]

Om nah hoo pez nyeetz, Don P!

Wieso arbeitet es denn weiter? Weiss ja nicht, was du da programmiert hast, aber warum beendest du die Ausführung nicht einfach, nachdem die Bilsquelle zugewiesen ist.

Pilsquelle!

Matthias

[Don P]

Hallo,

Pilsquelle!

Richtig. So muss es heißen :)

Die Schreibweise ist aber Nebensache, solange man weiß, wo eine gute Quelle zu finden ist, wie lange es zum Laden braucht (7 Minuten oder so) und wie man es dann am besten konsumiert: Oral auf Ex oder mit Strohalm, jedenfalls nicht ohral oder gar nasal... intravenös kommt auch nicht gut.

Wie sagte doch mein Therapeut: "Alkohol allein ist keine Lösung. Sie müssen das Zeug schon saufen."

Gruß, Don P