jQuery :: 画像のリロード :: ウェブデザイナーの日記

jQuery :: 画像のリロード

2009/12/10 (Thu) at 6:32 am

Javascriptで（jQueryの話）、既にあるimgタグの中身を更新したい、つまり、src属性の値は同じなんだけれども、画像そのものが変わっているので、強制リロードさせたいとき、たいていのブラウザはキャッシュを呼ぶので、

var src = '/path/to/img.jpg';
$('img').attr('src', src);

とやってもなにも変わりません。くそお。

こんなときには、srcの最後に "?xxxxx"みたいなインチキクエリをくっつけてやると、ブラウザは「ちがう画像だ！」と解釈して新しい画像に差し替えて表示してくれるようになります。"xxxxx" に入る文字列はなんでもいいですが、常にユニークであることが望まれるので、普通はtimestampを使うようです。

var timestamp = new Date().getTime();
$('#img-id').attr('src', $('#img-id').attr('src')+'?'+timestamp);

という風にやると期待通りの結果が得られます。"img-id" というところは、imgタグのidです。もちろんこのぶぶんは、idで指定するだけでなく、jQueryのセレクタ指定が使えます。

「よくわからないヨ」という方は、以下のソースをコピーして適当なファイル名をつけて自分のコンピュータに保存してください↓

<html>
<head>
<script type="text/javascript" src="./jquery-1.3.2.min.js"></script>
<script>
$(function(){
	$('#doIt').click(function(){
		var timestamp = new Date().getTime();
		$('#img-id').attr('src', $('#img-id').attr('src')+'?'+timestamp);
	});
});
</script>
</head>
<img src="./img.jpg" id="img-id" />
<button type="button" id="doIt">強制リロード</button>
</html>

htmlファイルと同じ場所に、jquery-1.3.2.min.jsとimg.jpgという名前のjpg画像ファイルを置く。ブラウザで開いてみる。img.jpgと『強制リロード』という名前のボタンが表示される。ブラウザはそのままにしておいて、img.jpgをなんでもいいので他のjpg画像と差し替える。つまりimg.jpgという同じ名前で上書き保存する。ブラウザに戻って『強制リロード』というボタンをクリックする。すると画像が更新されるでしょう？

こういうことをやりたかったのですね。

また、あるいは、src属性に指定されたパスの場所に画像があるかどうか定かでないというパターンもありがちです。なにかのAPIを使って大量の画像を取得して表示するようなサイトとかですね、アイテム数がメチャ多くて、個々の更新頻度が非常に高いショッピングサイトとか。

画像がそのパスにあるかもしれないし、ないかもれしれない。もし画像があれば、それは別の画像に入れ替わっているかもしれないし、前と同じかもしれない。もし別の画像ならキャッシュを更新してリロードして表示させたい。ということをやりたければ、以下のようにすればいいかな↓

function reloadImg(imgPath){
  $.ajax({
      type: 'GET',
      url: imgPath,
      cache: false,
      success: function(msg){
        var _timestamp = new Date().getTime();
        $('#img-id').attr('src', imgPath+'?'+timestamp);
      }
  });
}

というのを考えてみたのですが、画像すべてをこの関数にブチこんで繰り返し処理するというのはよくないと思います。重くなるでしょうきっと。その場合は、サーバ側で画像ファイルの最終更新日を取得して、対象となる画像のidを取得し、それをajaxでクライアントに送り、Javascript側でそのidを持つimgだけを対象に上記のメソッドで処理する。という調子でやるのがいいのかなという気がします。

前のエントリへ次のエントリへ

コメント・プリーズ！

お名前 (your name)

(required)

url

(optional) ※公開されます。

メールアドレス (email)

(optional) ※公開されません。管理者にだけわかります。

コメント (comment)

(required)

クッキーにお名前、url、メールアドレスを保存する。

※クッキーに保存すると次回から入力を省略できるので便利ですが、お使いのコンピュータに情報が残りますので、公共のパソコンなどからアクセスするような場合はチェックをはずしたほうがよいでしょう。

※コメント中のhtmlタグは実体参照に変換されます。たとえば、『<』は『<』というかんじになりますのでhtmlタグをそのまま書き込んでくださってオッケーです。

PROFILE

藤居ヒロヤ。ウェブデザイナー／ウェブディレクター。ウェブデザインオフィス、3OT NET主宰。名古屋市中区。「優しいデザイン」「激しいデザイン」「正しいデザイン」「セクシーなデザイン」「泣けるデザイン」「もっともなデザイン」... 。あなただけのウェブデザインを丹精込めておつくり致します。見積り依頼等、お気軽にお問い合わせ下さい。

www. http://www.3ot.net/
email. admin [atmark] 3ot.net
phone. 052 323 7376

お問い合わせフォーム