Warten bis image geladen ist

[Sempervivum]

Hallo,

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

"geht nicht gibt's nicht", aber von Anfang an:

Du hast vollkommen Recht, mit diesem Problem ist jeder konfrontiert, der Bilder lädt und bei der weiteren Verarbeitung darauf an gewiesen ist, dass sie fertig geladen sind.

Das Verfahren mit der Schleife ist machbar, es gibt da eine Eigenschaft, die angibt ob das Bild vollständig geladen ist:
https://developer.mozilla.org/en-US/docs...t/complete
Aber auf der anderen Seite nicht sehr elegant, es gibt bessere.

Einfachste Möglichkeit: Die weitere Verarbeitung vom load-Event abhängig machen, etwa so:

Code:

const image = new Image();
image.onload = event => {
    // Alle weitere Verarbeitung,
    // die auf dem vollständig geladenen Bild aufbaut,
    // hier drin
};
image.src = img_url;

Großer Nachteil dabei: Das Ganze wird unübersichtlich verschachtelt, wenn man auf mehrere Bilder warten muss.

Alternative für mehrere Bilder: Eine Funktion definieren, die bei jedem load aufgerufen wird und einen Zähler erhöht, der die geladenen Bilder zählt. Hat dieser die Anzahl der zu ladenden Bilder erreicht, wird die weitere Verarbeitung gestartet.

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.

Auch das ist machbar, wenn Du das Verfahren async - await anwendest. Setzt allerdings voraus, dass sich alles in einer async-Funktion abspielt und wird z. B. hier beschrieben:
https://www.fabiofranchino.com/log/load-...ing-await/

Ich kenne aber keine Möglichkeit, die nicht von einer kapselnden Funktion abhängig ist.

Wenn man mal von dem veralteten XMLHttpRequest absieht, wo man auf synchrone Verarbeitung umschalten kann. Davon raten aber alle verlässlichen Quellen ab.