Warten bis image geladen ist

[mike64]

Hallo

es sollte einfach sein, aber es ist wohl ein bekanntes Problem mit dem asynchronen Laden eines images

Mein Problem ist, daß ich ähnlich einer VCL Objekte erzeuge, die in Canvas grafisch dargestellt werden, ihrerseits buttons enthalten usw.
Das klappt auch alles ganz gut, solange die darzustellenden Bilder geladen sind.
Lege ich ein Objekt an, wird das Bild geladen und ich benötige bereits in der nächsten Zeile die Bilddaten, die aber noch nicht zur Verfügung stehen.

Weitere Objekte hängen dann von diesem Objekt ab, ich kann es also nicht asynchron programmieren

Der Versuch auf das Bild zu warten scheitert an der Endlosschleife, hier mal mit ausgeklammertem Timeout.

Die Bedingung wird nie erfüllt, auch nicht wenn ich auf image.height!=0 teste.

Ich vermute mal, daß in der Schleife zumindestens mal so etwas wie processmessages stehen muß, damit andere Arbeiten weiter gehen?

Wer weiß Rat?

Code:

function loadImg (img_url)
{
const image = new Image();
imgLoad=false;
image.onload = function () {imgLoad=true;};
image.src = img_url;
var imgTO=false;

//var to=setTimeout(() => {
//  imgTO=true;
//}, 1000);

while ((!imgLoad)) { }; // wait && (!imgTO)
//clearTimeout(to);

//if (imgTO) { return null; } else { return image; }
return image;
}