forの処理を中断してある条件下で再開させる方法

Question

forで画像を生成し、生成した画像のロードが終わるまで処理を待機し、再開することはできますか

<script>
window.onload=function(){
for(i=0;i<100;i++){
img=document.createElement("img");
img.src=""//かなり重い画像を読み込む 画像は毎度別と仮定する
//↓読込が終わるまでループを停止
img.addEventListener('load', function() {
//ループを再開する
});
document.body.appendChild(img);
}
}
</script>

Comments

[yambejp]

質問内容をガラッと変えましたね・・・
1枚読むごとに表示したいのでしょうか？
それとも全部読んだ後に表示したいのでしょうか？
img.srcはfor文の中でどうやってユニークに指定するつもりでしょうか？

Answer 1

昔は重い画像はImageオブジェクトで先読みするのが流行っていましたが
こういうのではだめなのでしょうか？

<script>
window.addEventListener('DOMContentLoaded', ()=>{
  const tmp=new Image();
  tmp.src="重い画像";
  const img=document.createElement("img");
  img.setAttribute('alt','loading');
  document.body.appendChild(img);
  tmp.addEventListener('load', function() {
    img.src=tmp.src;
    img.setAttribute('alt','');
  });
});
</script>

※そもそもそんなに重い画像を表示させることが良いかどうかが疑問ですが

forでの処理

配列に設定してある画像を1枚ずつ順番に表示する。

window.addEventListener('DOMContentLoaded', async()=>{
  const imgs=["1.jpg","2.jpg","3.jpg"];
  for(src of imgs){
    const tmp=new Image();
    tmp.src=src;
    const img=document.createElement("img");
    img.setAttribute('alt','loading');
    document.body.appendChild(img);
    await new Promise(resolve=>{
      tmp.addEventListener('load', function() {
        img.src=tmp.src;
        resolve();
      });
    });
  }
});

Comments

[masayukikun]

勝手ながらより具現性の高い訂正をしました
もしおわかりでしたらお答えいただけると幸いです

[yambejp]

質問への追記修正希望に書いちゃいましたが
1枚読むごとに表示したいのでしょうか？
それとも全部読んだ後に表示したいのでしょうか？
img.srcはfor文の中でどうやってユニークに指定するつもりでしょうか？

[masayukikun]

1枚読むごとに表示したいのでしょうか？
その通りでございます
1つ目読込完了までループ待機→2つ目生成→2つ目読込完了までループ待機→以降100まで

という形にしたいです

[masayukikun]

img.srcはfor文の中でどうやってユニークに指定するつもりでしょうか？

連番でもいいですし、配列でもいいと考えています

[yambejp]

srcの指定は？
同じ画像を指定する場合はキャッシュで1で読んだ画像が一気に表示可能です

[masayukikun]

画像は1枚ごとに違う重い画像を指定しますのでキャッシュは効きません

[yambejp]

追記しておきました

Answer 2

async/awaitを利用するのはいかがでしょうか。

<script>
window.onload = async function (event) {
  for (let index = 0; index < 100; index++) {
    const img = document.createElement("img");

    img.src = `image.jpg`;

    document.body.appendChild(img);

    await new Promise((resolve) => { img.onload = resolve; });

    console.log("loaded!");
  }
};
</script>