Javascriptで画像を大量に読み込みたい

Question

###Javascriptで画像を大量に読み込みたい

とある案件でJavascriptで画像を大量に読み込んでThree.jsで処理するものがあり、大量に画像を読み込む時の処理の方法がわからず困っています。

該当のソースコード

処理の部分をこんな感じにしましたが画像読みこむ前に次のプログラムに進んでしまいます

function action(i) {
    return new Promise( (res) => {
        texture1[i] = new THREE.TextureLoader().load(pic_data[i].src1);//ここと
        texture2[i] = new THREE.TextureLoader().load(pic_data[i].src2);//ここが非同期
        res(texture1[i],texture2[i]);
    });
}

function loop( fn, i, end) {
    return fn(i)
    .then( (te1,te2) => {
        tex1(te1,i);
        tex2(te2,i);
        if ( i < end ) {
            return loop( fn, i+1, end);
        }
        else {
            start();
        }
    });
}
$.ajaxSetup({async: false});
$.getJSON("./pic.json",(data)=>{
    pic_data=data;//画像を配列に格納
    loop(action, 0, pic_data.length );//処理開始
});
$.ajaxSetup({async: true});

試したこと

Promiseがいいといわれホイホイ使いましたがfor文を使用した時の使い方がわかりません。

補足情報（FW/ツールのバージョンなど）

jQuery v3.3.1
Three.js r101

参考

Promiseでループ処理

Comments

[退会済みユーザー]

> 先にいってしまいました

とはどういうことですか？

[akatsuki1910]

画像読みこむ前に次のプログラムに進むってことです
言葉不足すぎでしたすみません

Answer 1

Three.jsとか触ったこともないですけど、ドキュメントによるとloadメソッドのコールバックで次の処理ということみたいなので

async function loadTexture(imagePath) {
  return new Promise((resolve, reject) => {
    const loader = new THREE.TextureLoader();
    loader.load(imagePath, function(texture) {
      resolve(texture);
    });
  });
}

こういうPromiseを返す関数を作って

async function main() {
  for (const imagePath of imagePaths) {
    await loadTexture(imagePath)
  }
}

こんな感じで順番に処理できるはずです。

JSの伝統的な非同期処理の対応方法である callback と、その扱いにくさを克服するために生まれ Promise と async/await について学習して下さい。

Comments

[akatsuki1910]

動きました!!ありがとうございます。
Promiseばかり見てましたがasync/awaitも必要なんですね…勉強になりました。

[退会済みユーザー]

promiseでも可能です。
asyncawaitはpromiseをさらに書きやすくしたものです。