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

goto_jp 201views 更新:2015年7月22日

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でカバーしたいところです。

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません