javascript - 画像をプリロードする機能 - 今すぐ描画する必要がありますが、どのように?

Question

キャンバスをいじっています。そして、私は何かに少し迷っています。

私はこの機能を持っています:

function preloadimages(arr) {
        var newimages = []
        var arr = (typeof arr != "object") ? [arr] : arr
        for (var i = 0; i < arr.length; i++) {
            newimages[i] = new Image()
            newimages[i].src = arr[i]
        }
    }

そして、私はそれを次のように呼びます：

preloadimages(['images/background.png', 'images/hero.png', 'images/monster.png']);

唯一の問題は、後でもう一度描画する方法がわからないことです。

js 内に 1 つの画像をプリロードしていた場合、次のように言います。

var bgOk = false;
var bg = new Image();
bg.onload = function () {
    bgOk = true;
};
bg.src = "images/background.png";

そして、それを描きたいと思ったら、次のように言います。

if (bgOk) {
        context.drawImage(bg, 0, 0);
    }

そして、それはそれです。問題は、プリローダー クラスを作成したことです。現在描画したい画像だけを呼び出す方法や、bgOk のアイデアを実装して、正常に読み込まれた場合に描画できるようにする方法さえわかりません。そうでない場合は、放っておいてください。

誰かがこれについて私にアドバイスできますか？私は基本的に、醜くて保守しにくい巨大なjavascriptファイルで通常持っている汚い大混乱ではなく、よりクラスベースにしようとしているだけです。