JavaScript での質問です。

Imageオブジェクトを利用して、画像の幅・高さを取得しています。
ですが、以下の2点のおかしな動作に、困っています。以下の2点のいずれか、ご回答願います。
ブラウザは、InternetExplorer6.0です。
解決方法がない場合、原因だけでもお願いします。

1.一番最初のアクセス時にsrcプロパティを設定して読み込ませた状態の場合、”時々”上手く読み込めない。(幅・高さが、「0」になる)
2.一度画像を読み込むと、画像の幅・高さがキャッシュのようなもので残るようです。2度目以降は、いくら、ブラウザを再起動させても、画像の幅・高さを画像ソフトで変更しても1度目のものの値が利用されてしまう。

回答の条件
  • 1人5回まで
  • 登録:2006/12/04 06:00:38
  • 終了:2006/12/11 06:05:03

回答(2件)

id:kibitaki No.1

kibitaki回答回数53ベストアンサー獲得回数42006/12/04 09:52:53

ポイント35pt

1は、imgのonload時のみ画像サイズを取得すればよいと思います(abort時はretryするなど)。

2は、画像名の後ろに毎回異なるクエリストリングを動的に付加すれば、

ブラウザは毎回サーバーからイメージを取得します。

(例:aaa.jpg?12345→次回読み込みではaaa.jpg?67890等)

javascriptを使用できる方でしたら、静的HTMLとの組み合わせでも

難しくないと思います。

id:Crstl

 良回答、有難うございます。

 こちらで、対処できそうです。

 一応他に、方法があるかもしれないので、少し、待ってみます。

 1ですが、同一関数内で、上手く出来る方法あれば、嬉しいです。

 2ですが、毎回データを取得しに行くのは、JS自体が遅くなってしまう恐れがあるので、できるだけ同じ画像で幅・高さを取得したいです。

 IEの仕様上の問題かもしれませんが…、

2006/12/05 18:21:04
id:susie-t No.2

susie-t回答回数99ベストアンサー獲得回数182006/12/07 17:13:42

ポイント35pt

私も2の件はそのうち質問を出そうと思っていたのですが、すっかり忘れてました^^;

http://d.hatena.ne.jp/susie-t/20060704/1151993490

原因は相変わらず不明(IEの仕様というより、バグっぽい)ですが、改めて対策を考えてみました。

  • 一度、style visibility:hidden; position:absolute;なimg要素のsrcプロパティにImageオブジェクトをセットする。(width、heightは無指定)
  • その後、上記img要素のoffsetHeight、offsetWidthを使用する。

これでいけそうな気がします。

<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オブジェクトから取得するとかも考えられますが。とりあえずということで^^;

参考になれば幸いです。

id:Crstl

 なるほど!!

 確かにこの方法ですと、ちゃんと取れますね。

 この方法で、とりあえず回避しようと思います。

 とても参考になりました。ありがとうございます!

2006/12/08 02:45:57

コメントはまだありません

この質問への反応(ブックマークコメント)

トラックバック

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません