Warten bis image geladen ist

[Sempervivum]

Nein, keine Endlosschleife. Ich meinte das so:

Code:

        const imgUrls = ['images/dia0.jpg', 'images/dia1.jpg', 'images/dia2.jpg'];
        let counter = imgUrls.length;
        function checkReady() {
            counter--;
            if (counter == 0) {
                // Jetzt sind alle Bilder geladen und die Bearbeitung,
                // die das voraus setzt, kann beginnen
            }
        }
        imgUrls.forEach(url => {
            const img = new Image();
            img.onload = event => {
                // Hier kannst Du das Objekt für das Bild anlegen

                // Prüfen ob alle Bilder geladen sind:
                checkReady();
            }
            img.src = url;
        });

Müsste man noch für den Fehlerfall erweitern, falls ein Bild nicht geladen werden kann.

---

Und mit async-await:

Code:

        async function loadImages() {
            const 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)
                    }
                });
            }
            const img1 = await loadImage('images/dia0.jpg');
            const img2 = await loadImage('images/dia1.jpg');
            const img3 = await loadImage('images/dia2.jpg');
            // An dieser Stelle sind alle Bilder geladen
            console.log('all images ready')
        }
        loadImages();