javascript:画像読み込みと同期処理

前提・実現したいこと

様々な大きさの画像を、だいたい同じ大きさにして表を作りたいと考えてます。
その際に、javascriptで画像を読み込んでその画像のサイズを取得したいのですが、容量が大きい画像だと読み込み終える前に次の処理がはしってしまいます。そのため縦横の大きさが0になってしまっていて困っています。
非同期処理のせいかな？と思っているのですが、同期処理にする方法がいまいちよくわかりません。
全体の処理をあまり遅くしたくもないのですが、方法がよくわからないです。
初歩的なことで申し訳ありませんが、どなたか良い方法をご存知でしたら、教えていただけるとありがたいです。

該当のソースコード

javascript
1//画像分繰り返す
2　var imageObj = new Image();
3　imageObj.src = this.path;
4　img_height=imageObj.height;
5　img_width=imageObj.width;
6　//表作成処理(セル部分)
7　・・・
8
9//指定場所にappendする
10$('#***).append(****)

行動規範の内容に同意します

回答1件

ベストアンサー

非同期処理のせいかな？と思っているのですが、同期処理にする方法がいまいちよくわかりません。

現在Imageオブジェクトによる画像の読み込み(デコード)処理を同期的に行う方法はありません. 各Imageオブジェクトのloadイベントを待ち, 全ての画像の読み込みが完了したことを確認してから画像サイズを取得するようにして下さい.

JavaScript
1const img1 = new Image(), img2 = new Image(), img3 = new Image();
2let loaded = 0, failed = false;
3img1.onload = img2.onload = img3.onload = 
4	img1.onerror = img2.onerror = img3.onerror = function(e){
5	loaded++;
6	if(e.type == "error"){failed = true;}
7	if(loaded < 3){return;}
8	if(!failed){
9		//何らかの処理
10	}else{
11		//失敗時の処理
12	}
13};
14img1.src = "xxx.jpg";
15img2.src = "yyy.png";
16img3.src = "zzz.gif";