Загрузка нескольких изображений с помощью JavaScript

Question

Я изо всех сил пытаюсь создать скрипт для загрузки нескольких изображений для игры, нарисованной на холсте.Кажется, что окно загружается без завершения загрузки всех изображений.Я пробовал много способов, но ни один из них, кажется, не работает.Функция drawGameMenu () вызывается до фактической загрузки изображений, поэтому изображения не отрисовываются.Если бы кто-то мог помочь, я был бы благодарен.Вот мой скрипт, с наилучшими пожеланиями:

var imageNames = ["menuImage", "resetScoreButton", "instructionsButton", "playButton", "dialogPanel", "gamePlayImage", "exitButton", "timerPanel", "messengerPanel", "scoreBar", "yesButton", "noButton", "goButton"];
var imageFileNames = ["game_Menu", "reset_score_button", "instructions_button", "play_button", "dialog_panel", "game_play", "exit_button", "timer", "messenger_panel", "score_bar", "yes_button", "no_button", "go_button"];
var imageCollection = {};

window.addEventListener("load", function() {
    var u = imageNames.length - 1;
    for(i = 0; i <= u; i++) {
        var name = imageNames[i];
        imageCollection[name] = new Image();
        imageCollection[name].src = imageFileNames[i] + ".png";
        console.log(imageCollection[name]);
        imageCollection[name].addEventListener('load', function() {
            do {
                var x = imageCollection[name].complete;
            }
            while(x != true);
        });
    }   
    drawGameMenu();
});

Я внес некоторые изменения в скрипт, и теперь он работает в браузере ПК, но не работает на смартфоне.Сценарий следующий:

window.addEventListener("load", async function loadImageCollection() {
    var u = imageNames.length - 1;
    for(i = 0; i <= u; i++) {
        var name = imageNames[i];
        imageCollection[name] = new Image();
        imageCollection[name].src = imageFileNames[i] + ".png";
        do {
            await new Promise((resolve, reject) => setTimeout(resolve, 50));
            x = imageCollection[name].complete;
            console.log(x);
        }
        while(x == false);
    }   
    drawGameMenu();
});

Answer 1

Не усложняйте

Просто используйте простой обратный вызов и счетчик для подсчета изображений при их загрузке.Добавление обещаний добавляет дополнительный уровень сложности, который является просто источником потенциальных ошибок.(обещание для каждого изображения и его обратного вызова и необходимость вызова его при загрузке изображения, а также необходимость обработки promise.all с другим обратным вызовом)

const imageCollection = loadImages(
    ["menuImage", "resetScoreButton", "instructionsButton", "playButton", "dialogPanel", "gamePlayImage", "exitButton", "timerPanel", "messengerPanel", "scoreBar", "yesButton", "noButton", "goButton"],
    ["game_Menu", "reset_score_button", "instructions_button", "play_button", "dialog_panel", "game_play", "exit_button", "timer", "messenger_panel", "score_bar", "yes_button", "no_button", "go_button"],
    drawGameMenu  // this is called when all images have loaded.
);

function loadImages(names, files, onAllLoaded) {
    var i, numLoading = names.length;
    const onload = () => --numLoading === 0 && onAllLoaded();
    const images = {};
    for (i = 0; i <= names.length; i++) {
        const img = images[names[i]] = new Image;
        img.src = files[i] + ".png";
        img.onload = onload;
    }   
    return images;
}

Answer 2

С использованием обещаний это становится очень простой задачей, я не знаю, разрешено ли использование ES6, но все равно попробуйте.

var jarOfPromise = [];

    for(i = 0; i <= u; i++) {

        jarOfPromise.push(
            new Promise( (resolve, reject) => {
                var name = imageNames[i];
                imageCollection[name] = new Image();
                imageCollection[name].src = imageFileNames[i] + ".png";
                console.log(imageCollection[name]);
                imageCollection[name].addEventListener('load', function() {
                    resolve(true);
                });
            })
        )

    }


    Promise.all(jarOfPromise).then( result => {
        drawGameMenu();
    });