大阪府枚方市のWEBデザイナー岡田大誠のブログ

うぇぶだろぐ

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

LINEで送る
Pocket

google_chrome

こんにちは。

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

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

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

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

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

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

[js]
$(function(){
 var img_width = $(‘img.hoge’).width();
 $(‘.test’).css(‘width’,img_width);
});
[/js]

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

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

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

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

ですので、今回は

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

これを使いました。

最終的に

[js]
$(window).load(function(){
 var img_width = $(‘img.hoge’).width();
 $(‘.test’).css(‘width’,img_width);
});
[/js]

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

やたらと僕はChromeさんのバグやらこういう問題に遭遇します。

呪われているのでしょうか(笑)

LINEで送る
Pocket