JavaScriptで複数の画像を読み込む新しい方法

JavaScriptで複数の画像を読み込みたい。しかも高速に。
初心者にとっては鬼門の処理ですが、2021年現在だとこのように書きます。

loadImages関数

function loadImages(list){
    async function load(src){
        const img = new Image()
        img.src = src
        await img.decode()
        return img
    }
    return Promise.all(list.map(src => load(src)))
}

• 「画像の読み込みが完了したら」といえばonloadが定番でしたが、現在はdecode()がオススメです。
• Promise.all()を使うと、非同期処理を並列に実行して結果を受け取ることができます。

使い方※async関数内で使ってね

const images = await loadImages(['./1.png', './2.png'])

引数に読み込みたい画像のパスが入った配列を渡します。
最終的な戻り値は配列です。img要素が順番に入ってます。