用JavaScript加载多个图像 [英] Loading multiple images with javascript

问题描述

我正在努力创建一个脚本，以便为在Canvas上绘制的游戏加载多个图像.窗口似乎没有完成所有图像的加载而加载.我尝试了很多方法，但似乎都没有用.在实际加载图像之前将调用drawGameMenu()函数，因此不会绘制图像.如果有人可以提供帮助，我将不胜感激.这是我的脚本，亲切的问候:

I am strugling to create a script to load multiple images for a game drawn on Canvas. The window seems to load without completing the load of all images. I've tried many ways but none of them seems to work. The function drawGameMenu() is called before the images are actually loaded and so the images are not drawn. If someone could help, I would be grateful. Here is my script, kind regards:

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();
});

我对脚本进行了一些更改，现在它可以在PC浏览器上运行，但不能在智能手机上运行.脚本如下:

I made some changes on the script and now it works on the PC browser, but not working on smartphone. The script is the following:

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();
});

推荐答案

保持简单

只需使用一个简单的回调和一个计数器即可在加载图像时对它们进行计数.增加承诺会增加额外的复杂性，而这仅仅是潜在错误的来源. (每个图片及其回调的承诺，以及在图片加载时调用它的需要，以及需要通过另一个回调处理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;
}

这篇关于用JavaScript加载多个图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！