JavaScript Prüfe, ob ein Bild vorhanden ist

[Woodz]

Hallo.

Ich sitze jetzt seit einigen Stunden an einem Problem und bekomme es einfach nicht glöst.
Ich besitze ein Array in dem die URLs von Bildern enthalten sind. Diese Bilde sollen mit Hilfe von Promise vorgeladen werden.

Das Problem ist nur, dass nicht klar ist, ob die Bilder, deren URLs in dem Array liegen, auch wirklich vorhanden sind, weshlab geprüft werden soll, ob das Bild beim vorladen existiert und wenn nicht, dann soll ein default-Bild geladen werden:

ImageURLArray = ["img/Bild1", "img/Bild2", ... ]

async function loadImages(ImageURLArray) {
    const promiseArray = []; // Array für promises
    const ImageArray = []; // Array für Images

    for (let imageUrl of ImageURLArray) {

        promiseArray.push(new Promise(resolve => {

            const img = new Image();
            img.onload = function() {
                    
                this.src = imageUrl;
                    
                resolve();
            };
            img.onerror = function() {
                
                this.src = "img/Default.png";
                    
                resolve();
            };
            
            ImageArray.push(img);
        }));
    }


    await Promise.all(promiseArray); // Warte bis alle Bilder geladen wurden:
        
    return ImageArray;
};

let df = new Array();

df = loadImages(ImageURLArray);

Wenn ich das hier ausführe, liefert es mir keinen Fehler, aber das ganze Konstrukt lädt und lädt und lädt und es passiert gar nichts.

Beste Grüße,
Woodz

 

[Bagbag]

loadImages() ist eine async function, das heißt sie gibt ein Promise zurück. Auf das musst du entweder mit await warten oder mit .then() ein callback ausführen lassen. Ansonsten hast du du in deiner df variable einfach ein Promise.

Abgesehen davon: es könnte sein, dass die Bilder erst geladen werden, wenn du die Image Objekte dem DOM anfügst.

 

[tollertyp]

Ohne konkrete Tipps zum Problem zu geben:

• Logging einbauen
• Wie groß ist die Bilder-Menge?

 

[Joshinator]

Ist vielleicht ne dumme Frage, aber wieso machst du es dir so kompliziert?

Du hast ein Array aus URLs die du laden willst, warum hängst du nicht einfach alle Bilder per JS als <img> in den DOM?
Der Browser wird dann sofort versuchen jedes Bild zu laden, wenn das Bild nicht geladen wird kannst du onerror im <img> benutzen um das Fallback-Pic als src zu setzen.

 

[mastaqz]

Falls loadImages auf dem obersten Level ist, muss du daraus ein IIFE machen, damit du async/await nutzen kannst: https://stackoverflow.com/questions/46515764/how-can-i-use-async-await-at-the-top-level