Chromeの画像の読み込みタイミングとサイズ指定の関連性

JavaScriptの挙動がChromeだけ異なっていて悩んで解決したことのメモ。

結論から言うと…

• Chromeは画像の読み込みをJS実行後に行う
• だから img タグのwidth,heightの指定は全てきちんと設定しましょう。

Chromeは画像の読み込みをJS実行後に行う

あるレイヤーの縦幅を下記例のように取得しようとしたところ、Chromeだけ想定外の数字で返ってきた。

var height = $("#layer").outerHeight();

IE、Firefoxでもデバッグツールで確認したところ、実行直後のブレークポイントで止めるとChromeだけレイヤー内の画像が表示されておらず、完了後に表示される事に気づいた。

その画像の有無で縦幅の数字に違いが出ていた。

もしやと思い img タグにwidth,heightを指定したところ、想定通りの数字になった。

Chromeは画像の読み込みをJS実行後に行うので、 img タグでちゃんと幅指定しておかないと幅の確保が行われずに数字が色々狂うようです。HTMLで直接書いておけないこともありますが、そこもJSでカバーしたいところです。