Question

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

class User < ApplicationRecord
 has_many :sales_clients, :class_name => "Client", :foreign_key => "sales_ee_id"
 has_many :market_traders, :class_name => "Client", :foreign_key => "market_ee_id"
 has_many :clients, dependent: :destroy
 has_many :transactions, :through => :traders
end

class Client < ApplicationRecord
 belongs_to :sales_ee, :class_name => 'User', optional: true
 belongs_to :market_ee, :class_name => 'User', optional: true
 has_many :transactions, dependent: :destroy
 belongs_to :user
end

class Transaction < ApplicationRecord
 belongs_to :client
 has_one :user, :through => :client
 has_one :sales_ee, :through => :client
 has_one :market_ee, :through => :client, required: false
end

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

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

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

使用promises成为一项非常容易的任务，我不知道是否允许使用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();
    });

用JavaScript加载多个图像

2 个答案:

保持简单