画像の要素の高さをclientHeightで得ますが

Question

imgをcreateElementで動的生成してappendします
画像のheightはautoとします
この場合、imgが読込完了しないと正確なclientHeightは取れないんでしょうか

色々錯誤しましたが、取れたり取れなかったりとアンバランスなようなのですが。
1は画像が読込完了した時点でclientHeight
2は生成した時点でclientHeight
違うが生まれるのは読込完了しないと正確な高さが取得できないという認識でいいでしょうか

<script>
window.onload=function(){
image=document.createElement("img");
image.id="img_obj";
image.src="";//あえて超巨大画像を指定する
image.style.height="auto";
１　image.addEventListener('load', function() {//読込完了する前に２が実行されると想定する
alert(this.clientHeight);//２の高さと違ったりする
});
document.body.append(image);
alert(img_obj.clientHeight);//２
}
</script>

Answer 1

image = document.createElement("img");
image.src = "https://picsum.photos/700/500/?random";
document.body.append(image);
test = () => {
  console.log(image.clientHeight, image.complete);
  if (!image.complete || !image.clientHeight) setTimeout(test, 0)
};
test();

というコードを試してみたところ、完全に同時ではないようでしたが、タスク処理の関係のようにも思えます。
仕様については、他の回答を待ちたいと思いますが、itagagakiさんがおっしゃるように、ないものを得ることはできないだろうと思います。
確認していませんが、プログレッシブ方式JPGやインターレース方式PNGなどならば、ワンチャンあるかもですね。

---

なお、重複質問の方は速やかに削除リクエストを出していただくことを望んています。

---

インターレース方式PNGについて追記

インターレース方式PNG で試してみたところ、読み込み完了前にclientHeightを取得できていることが確認できました。

Answer 2

何かで挙動が定義されているものかどうか私は知らないので正確な答えを持ち合わせてはいませんが、定義されていなければ、それはブラウザの実装によるのではないでしょうか。そして常識的に考えてロードする前の画像のサイズがわかるわけがないと思います。ロード完了を待って正しく取得できるのなら、それが正しい値かどうかが保証されるとまでは言えませんが、現実には何ら問題は無いように思うので、質問が何を課題としているのかわかりません。

Comments

[pinkpink]

常識的ですか、、、
イメージタグを生成する場合ロードを待たないと次の処理に進めない仕様にするのが常識だったのですね

[itagagaki]

違います。ロードしていないもののサイズがわかるはずがないというのが常識です。
そのサイズに依存する処理には進めないでしょう。
それ以外の処理は非同期に実行できるでしょう。