promiseで画像を順番通りに描画する（javascript）

Question

javascriptの画像の読み込みは非同期処理なので、複数枚を描画する場合は描画順が変わることがあります。

　例：image_1.jpg -> image_4.jpg -> image_2.jpg -> image_3.jpg

そこでpromiseで画像描画の順番を制御したいのですが、複数枚（n枚）の画像を描画する際はどの様にコーディングすれば良いでしょうか。
下記は、2枚の画像を描画するサンプルになります。

    //非同期処理
    var promise1 = new Promise(function(resolve, reject) {

      //画像オブジェクト
      var img = new Image();

      //読込終了後の処理
      img.onload = function(ev){
        resolve(true);
      }

      //url
      img.src = "./image1.jpg";
    });

    //次の処理
    promise1.then(function(value) {

      //画像オブジェクト
      var img = new Image();

      //読込終了後の処理
      img.onload = function(ev){
        resolve(true);
      }

      //url
      img.src = "./image2.jpg";
    });

Comments

[maisumakun]

希望する動作としては、「ダウンロード自体を1つ終わってから、次のダウンロードに入る」のと、「ダウンロードは一斉に始めていいけど、表示するのは本来の順番通り」と、どちらでしょうか。

[uer03108]

ご回答ありがとうございます。「ダウンロード自体を1つ終わってから、次のダウンロードに入る」の方が確実だと思います。

Answer 1

画像のロードは読み終わったものから順次表示するのが原則です。
ロードを制御するのはあまり得策とはいえません。
全てのロードが終わったあとになにか実行したいということでしたら
promise処理する意味があります

Comments

[uer03108]

そうなんですね。
javascriptのcanvas描画で、画像の重ね合わせ制御が出来ないかと考えておりました。

[uer03108]

理解致しました。