質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

5347閲覧

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

tta

総合スコア7

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2018/03/26 01:08

前提・実現したいこと

様々な大きさの画像を、だいたい同じ大きさにして表を作りたいと考えてます。
その際に、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(****)

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

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

現在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";

NOTE:
画像の読み込みにImageBitmapオブジェクトを使うことでPromise+async~awaitにより複数画像の読み込みを"同期的"に記述する方法もあります.

投稿2018/03/26 01:12

編集2018/03/26 01:19
defghi1977

総合スコア4756

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

defghi1977

2018/03/29 03:04

ちなみに、最新のHTML仕様ではimg要素にdecoding属性なるものが追加されていて, ここに「sync」と記述しておくと「画像を同期的に読み込むこともあるよ」とのことです. が, まだこの属性をサポートするブラウザはありません.
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問