javascript - .attr('src', url) の変更後にブラウザに 1 つの画像だけを更新させるにはどうすればよいですか?

Question

dom に読み込まれた既存の画像を交換する必要がある画像を返す ajax アップロード スクリプトがあります。

例えば

<img src="http://site.com/user1-profile-pic.jpg" id="profile" />

新しい画像をアップロードするとjsonが返されます

{"url": "http://site.com/user1-profile-pic.jpg" }

次にjQueryを実行します

$("#profile").attr('src', myjson.url);

しかし、画像のURLは常に同じなので、その画像のキャッシュを破棄して再度ロードしたいと考えています。?timestamp画像の URL の末尾に追加するだけでよいでしょうか?

Answer 1

同じ名前を使用しているため、キャッシュされているため同じです。秘訣は、別の名前を使用することです。

別の名前を使用することはできないため、何かを追加します。

var dt = new Date(); 
$("#profile").attr( 'src', myjson.url + '?dt=' + dt.getTime() );

たった1回の呼び出しで（Sushilが言うように）：

$("#profile").attr( 'src', myjson.url + '?dt=' + (+new Date()) );

これは次のように出力されます。