jQueryでAmazonS3上の画像を再読み込みする方法

AmazonS3上の画像を表示するときは、下記ようなHTMLタグになると思います。

<img id="image1"
 src="http://hoge.s3.amazonaws.com/fuga/file.jpg?AWSAccessKeyId=AKIHOGE&amp;Expires=1322305525&amp;Signature=abcde" >

これをjQueryで再読み込みする方法をご紹介します。

var img = $('#image1');
var src  = img.attr('src');
var timestamp = new Date().getTime();
img.attr('src', src + '&' + timestamp);

srcをセットしなおすときに、URLの末尾に&1234...のように任意の文字列を付与してやるのがポイントです。
この例ではタイムスタンプを使いましたが、ランダム文字列であれば何でもかまいません。

なお、下記のようなやり方ではブラウザ側でキャッシュが効いて再読み込みされないので注意しましょう。
var img = $('#image1');
img.attr('src', img.attr('src'));
カテゴリ: