Warten bis image geladen ist

[mike64]

Ok vielen Dank.

die Verkettung der awaits kam mit heute Mittag auch bei einem Spaziergang mit dem Hund im Wald. Manchmal soll man mit Anstand auf die Dinge schauen.

Für die Nachwelt halte ich nochmal den gesamten Code fest, wie es funktioniert:

Am Ende der geladenen Seite rufe ich initCanvas() auf. Diese asynchrone Funktion übernimmt dann den kompletten Aufbau. drawCanvas() komt dann zum Schluß
Wichtig ist, daß alles in dieser async Funktion steht, denn nur so wird es nacheinander abgearbeitet.

Nimmt der Benutzer Änderungen an den darzustellenden Objekten vor muß genauso verfahren werden. In einer async Funktion nacheinander die hinzugekommenen Bilder laden und die Objekte dazu anlegen.

Eigentlich ganz einfach, wenn man weiß wie es geht

Code:

function loadImage (path)
{
    return new Promise((resolve, reject) => {
    const img = new Image();
    img.crossOrigin = 'Anonymous'; // to avoid CORS if used with Canvas
    img.src = path;
    img.onload = () => {
      resolve(img)
    }
    img.onerror = e => {
      reject(e)
    }
  })
}
async function initCanvas ()
{
  img_hjunc=await loadImage('images/KP_HORZ_Abgang.png');
  img_vjunc=await loadImage('images/KP_VERT_Abgang.png');
  // ...
  //  weitere images laden
  // ...
  // nun kommt der Aufbau meiner darzustellenden Objekte
  // erst image laden, ann den constructor aufrufen und das image übergeben
  img=await loadImage ('images/KP_basegrid.png');
  node=KTree.addnode (new TTreenode(null,new TBase(img))); 
  img=await loadImage ('images/KP_Zaehler.png');
  node=KTree.addnode (new TTreenode(node,new TCTR(img))); 
  // ...
  // weitere Objekte anlegen
  // ...

  // jetzt ist alles geladen nun ausgeben
  drawCanvas();  // eigene Funktion, die alle Objekte ausgibt
}




initCanvas();