Google Chromeで画像の幅を取得できないときの対処法

こんにちは。

ブラウザはChromeよりFirefox派の僕です。

今日は、仕事でChromeの困った仕様に遭遇したので忘備録として記事を書きます。

仕事であるjqueryプラグインを使用したのですがChromeだけ動作しないということが発生しました。

ややこしいことに、ローカルサーバーでは動くのにFTPでアップすると動かないという謎仕様。

そのプラグインは画像のwidthを取得して動作しているのですが開発者ツールで調べると、width:0になっていました。

なんらかの原因で画像の幅が取得できていないようです。

$(function(){
　var img_width = $('img.hoge').width();
　$('.test').css('width',img_width);
});

通常は上記のコードで「hode」というクラスをつけた画像サイズを取得し「test」というクラスにwidthを反映させるのですが

調べていくとChromeには特殊な仕様がありjqueryの

$(function(){ コード });

これが通常だとページ読み込み完了後に実行されるはずが、Chromeだと画像を読み込む前に処理が行われる仕様のようです。

ですので、今回は

$(window).load(function(){ コード });

これを使いました。

最終的に

$(window).load(function(){
　var img_width = $('img.hoge').width();
　$('.test').css('width',img_width);
});

これで正常に動きました。