Javascript IMGタグのwidthとheight

Ads/Widgets:
サイト情報:
QLOOKアクセス解析
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
久しぶりにはまったので久しぶりに覚え書きをここに。
とある用途で、「表示しないんだけどIMGタグに表示する画像のサイズだけ知りたい」ということがあって、それでもなんか素直にその辺を便利に取り出せそうなライブラリを使う気にならなくて、いろいろ考えた挙句にこんなコードを書いた。
// 捨てIMGエレメントにロードしてサイズを取る。
img = document.createElement('img');
img.onload = function () {
    img.onload = null;
    sizeX = img.width;
    sizeY = img.height;
};
img.src = 画像のURL;
Chrome/Opera/Firefoxで大丈夫そうだからと概ねうまく行ったと油断して、最後にIEで動かしてみると幅、高さ共に0が取れる…orz

なーんでこんなことになるのか、別のスクリプト書いたときには確かに取れたはずなんだが今回はナニが違うのか、そもそも幅0高さ0と内部認識しているくせにどうして画像をレイアウトできるのかその方が不思議じゃないかコラIEコノヤロウ、とかいろいろ考えていてフト思い当たった。
  • そういえばこのIMGエレメントはドキュメントのどこにもつながないでサイズだけ取り出して捨ててる
  • もしかして、IEではレイアウトした時点でwidthとheightを決定しているのでは…
この想像が正しければ、激しくウザイぞIE、いやもともとウザイけどさあ、とか考えながら試しにこんなコードに。

// 捨てエレメントを作ってロードしてサイズを取る。
img = document.createElement('img');
//ボディに追加して強引に表示
document.getElementsByTagName('body')[0].appendChild(img); 
img.onload = function () {
    img.onload = null;
    sizeX = img.width;
    sizeY = img.height;
};
img.src = 画像のURL;
すると…IEでも正常にサイズが取れる。
やっぱりレイアウトしないとwidthとheightを決めないようだ。

ひとまずこのケースは、IMGエレメントをドキュメントには繋ぐけど、スタイル指定で画面の遥か外に追いやる、という方法で回避することにしました、とさ。(position:absolute; top:-10000px; left:-10000px;て感じで)

いろいろスクリプトを書いてたけど、IEはIE8以外手元にないんだよなあ…IE6とかだと結構ヒサンなことになってるんだろうなあ…
この記事へのコメント
URL:
Comment:
Pass:
秘密: 管理者にだけ表示を許可する
 
この記事のトラックバックURL
http://arakiba.blog62.fc2.com/tb.php/323-d9c05a0a
この記事にトラックバックする(FC2ブログユーザー)
この記事へのトラックバック

 Copyright © アラキバ All rights reserved. 

 / Template by 無料ブログ テンプレート カスタマイズ
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。