人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

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

●質問者: Crstl
●カテゴリ:インターネット ウェブ制作
✍キーワード:JavaScript SRC アクセス オブジェクト キャッシュ
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● kibitaki
●35ポイント

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

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

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

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

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

難しくないと思います。

◎質問者からの返答

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

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

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

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

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

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


2 ● susie-t
●35ポイント

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

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

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

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

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

参考になれば幸いです。

◎質問者からの返答

なるほど!!

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

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

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ