Warten bis image geladen ist

[mike64]

Ok, aber jetzt setze ich noch einen drauf:

Ich habe mal eine Warteschleife in der aufrufenden Prozedur probiert

zuvor werden rund 30 Icons mit Loadimage geladen

Der Zähler erhöht sich erwartungsgemäß mit jedem Aufruf des Constructors, wird aber niemals niedriger.

Dagegen wird der Zähler niedriger sobald Arbeiten erledigt sind. Anscheinend, sobald der Browser Freizeit hat. 
Somit habe ich mein Problem mit der Endlosschleife wenn ich auf imgreq==0 teste.

Das würde bedeuten, daß ich die Anwendung ähnlich einer Interruptroutine komplett ereignisgesteuert programmieren muß.
Also eine Befehlswarteschlange die von zahlrreichen Loadimg getriggert ist (das kann es doch nicht sein)

Jetzt könnte ich natürlich erst das image laden und den Device constructor mit onload aufrufen, würde für die einzelnen Objekte funktionieren

Dann hänge ich spätestens bei drawcanvas wieder in der Situation, daß ich prüfen muß ob alles geladen ist und da ist sie wieder, meine nie erfüllte Endlosschleife.


Aufrufende Prozedur (Erstellung eines Objekts)

Code:

class TDevice
{
   image='';
   img=0;
   buttons=[];
   name='';

constructor (image)
  {
    this.image=image;
    if (image!='' )
    { this.img=loadImg (image);
      var i =0;
      do {
           if (i % 100000==0)   {console.log ('Waiting'+i+' '+imgreq);}
            i = i + 1;

      } while (i < 100000000 );
      this.buttons[0]={t:'M',img:img_menu,x:this.img.width-20,y:5,w:img_menu.width,h:img_menu.height};
    }
    else {this.img=null;}

Loadimage mit Zähler

Code:

function loadImg (img_url)
{
const image = new Image();
imgreq++;
console.log('requested :' +imgreq);
image.onload = function () {imgreq--; console.log ('pending :'+imgreq);};
image.src = img_url;
return image;
}