Imageオブジェクトを利用して、画像の幅・高さを取得しています。
ですが、以下の２点のおかしな動作に、困っています。以下の２点のいずれか、ご回答願います。
ブラウザは、InternetExplorer6.0です。
解決方法がない場合、原因だけでもお願いします。
１．一番最初のアクセス時にsrcプロパティを設定して読み込ませた状態の場合、”時々”上手く読み込めない。（幅・高さが、「0」になる）
２．一度画像を読み込むと、画像の幅・高さがキャッシュのようなもので残るようです。２度目以降は、いくら、ブラウザを再起動させても、画像の幅・高さを画像ソフトで変更しても１度目のものの値が利用されてしまう。
No.1
53
4
35pt
1は、imgのonload時のみ画像サイズを取得すればよいと思います(abort時はretryするなど)。
2は、画像名の後ろに毎回異なるクエリストリングを動的に付加すれば、
ブラウザは毎回サーバーからイメージを取得します。
(例：aaa.jpg?12345→次回読み込みではaaa.jpg?67890等)
javascriptを使用できる方でしたら、静的HTMLとの組み合わせでも
難しくないと思います。
No.2
9918
35pt
私も2の件はそのうち質問を出そうと思っていたのですが、すっかり忘れてました＾＾；
http://d.hatena.ne.jp/susie-t/20060704/1151993490
原因は相変わらず不明(IEの仕様というより、バグっぽい)ですが、改めて対策を考えてみました。
これでいけそうな気がします。
5
5
<html>
<head>
<title></title>
<script language="javascript">
<!--
//画像オブジェクト配列
var images = [new Image(), new Image()];
//画像先読み
images[0].src = "./sample9.gif"; //最初の画像
images[1].src = "./sample10.gif"; //次の画像
//ページ読み込み完了時実行関数
function init(){
changeImage(document.getElementById("img"), 0);
}
//画像変更
function changeImage(imgElem, index){
//画像そのものの幅・高さのポップアップ
alert("images[" + index + "].width : " + images[index].width);
alert("images[" + index + "].height : " + images[index].height);
//IMGタグの幅・高さのポップアップ
alert("imgElem.width : " + imgElem.width);
alert("imgElem.height : " + imgElem.height );
//IMGタグのサイズ(表示サイズ)を画像サイズに合わせる
var imghid = document.getElementById("imghid");
imghid.src = images[index].src;
//imgElem.height = images[index].height;
imgElem.height = imghid.offsetHeight;
//imgElem.width = images[index].width;
imgElem.width = imghid.offsetWidth;
//画像表示
imgElem.src = images[index].src;
}
//-->
</script>
</head>
<body bgcolor="blue" onload="init();/*読み込み時に最初の画像を設定*/">
<img id="img" onclick="changeImage(this, 1);/*クリック時に次の画像を設定*/"/>
<img id="imghid" style="visibility:hidden;position:absolute;"/>
</body>
</html>
ごちゃごちゃしててすみません・・・。
もっとスマートに、共通処理化して、ワーク用のimg要素はcreateElementするとか、ブラウザ判定してIE以外はImageオブジェクトから取得するとかも考えられますが。とりあえずということで＾＾；
参考になれば幸いです。
なるほど！！
確かにこの方法ですと、ちゃんと取れますね。
この方法で、とりあえず回避しようと思います。
とても参考になりました。ありがとうございます！
1
良回答、有難うございます。
こちらで、対処できそうです。
一応他に、方法があるかもしれないので、少し、待ってみます。
１ですが、同一関数内で、上手く出来る方法あれば、嬉しいです。
２ですが、毎回データを取得しに行くのは、JS自体が遅くなってしまう恐れがあるので、できるだけ同じ画像で幅・高さを取得したいです。
IEの仕様上の問題かもしれませんが…、