【JavaScript】 複数の「画像」を読み込むまで次の処理を止める

こんにちは、さち です。

今回は JavaScript で、複数の「画像」を読み込み終わるまで、次の処理に進まないようにする方法について書いていきます。

この方法は、以前作成した「X（旧Twitter）の高画質画像を表示するブックマークレット」でも使用しています。

使い方

サンプルコード

指定画像を読み込む「関数」を作り、その「関数」を使って複数の画像を読み込むコードです。

// 【関数】 指定画像の <img> 要素を取得
async function getImage(name) {
  const img = new Image();
  img.src = `https://example.com/${name}`;
  await img.decode();// 画像の読み込みが終わるまで次に進まない
  return img;
}

// 2つの関数の処理が終わるまで then に進まない
Promise.allSettled([
  getImage('sample1.jpg'),
  getImage('sample2.jpg')
])
  // 戻り値(PromiseValue)を受け取って処理する
  .then( ([img1, img2])=> {
    console.log(img1.width, img2.width);// 画像の幅を表示
  });

コードのポイント

「まだだよ」をする await と「もう良いよ」を返せる async

await は Promise が返ってくるまで次の処理に進まないようにする「演算子」です。

async は「非同期関数」の定義に使います。「非同期関数」の中で return を使うと resolved（解決） の Promise を返し、戻り値は PromiseValue として送られます。

 await を使用できるのは、 async で定義された「非同期関数」の中だけです。

img.decode() で画像を読み込めたか判別

img.decode() は画像の読み込みが終わると resolved（解決） の Promise を返します。

await と組み合わせて使うことで、画像の読み込みが完了するまで次の処理に進まなくなります。

Promise.allSettled() で処理がすべて完了したか判別

Promise.allSettled() は記述した複数の処理がすべて完了すると、次の .then() の処理に進みます。

Promise.allSettled() 内の処理はすべて並列で行われます。例えば、Promise.allSettled([ func1(), func2() ]) と記述した場合、func1() と func2() は処理が同時に始まるため、await を使って順番に処理するよりも高速になります。

Promise.all() でも同じことはできますが、どれか1つでも rejected（拒否） の Promise が返ってくると即座に中断されるため、エラー箇所を正確に把握できない場合があります。