jQueryでChromeの場合$(function(){]); が画像読み込み前に実行される場合の対応

2014年01月24日

結構前から知ってはいたんだけどイマイチ対処法が分からなくてしょうがなくsetTimeoutでごまかしていたChromeでの $(function(){ }); が画像ロード以前に実行されてしまう件についてです。

$(function(){}); はページのロード後に実行されるはずなんだけど、Chromeだと画像の読み込みよりも前に実行されてしまうから、例えばフローとした画像しか入ってないブロック要素の高さを揃えるようなスクリプトがある場合に高さが0になったりする。

結構前から知ってはいたんだけどイマイチ対処法が分からなくてしょうがなくsetTimeoutでごまかしていたChromeでの $(function(){ }); が画像ロード以前に実行されてしまう件についてです。

$(function(){}); はページのロード後に実行されるはずなんだけど、Chromeだと画像の読み込みよりも前に実行されてしまうから、例えばフローとした画像しか入ってないブロック要素の高さを揃えるようなスクリプトがある場合に高さが0になったりする。

例えばこんな感じ

# jade
.wrap.clrfx
  .img
    img(src="./kannomiho.jpg")
  .img
    img(src="./miyazakiaoi.jpg")
  .img
    img(src="./shinoharaai.jpg")
# sass
.img
  float: left
  width: 200px
  margin-left: 20px
  &:first-child
    margin-left: 0
# coffee
$(()->
  ele = $('.wrap .img')
  maxH = 0
  ele.each (()->
    h = $(this).height()
    if maxH < h
      maxH = h
  ele.css "height", maxH + "px"

今まで解決策が分かってなくて面倒だし setTimeout で1秒くらい遅延させてたんだけどこの度ちゃんとした(?)解決法を知りましたよ。

# coffee
$(window).load(()->
  ele = $('.wrap .img')
  # 以下同文

$(function(){}); じゃなくて $(window).load(function(){}); を使えば良いみたい。

「でもこれだと実行されるまでが遅くなる!」ってなるんだったら遅延させたい場所にだけ使えば良いんじゃないでしょうか。

他にこんな事も書いてます

FBでコメント

この記事はコメント、トラックバックおよびピンバックを受け付けていません。