1. ホーム
  2. jquery

[解決済み】jQueryで要素(画像)を再読み込み/リフレッシュする方法

2022-04-03 08:44:18

質問

jQueryを使って、サーバーから同じファイル名の画像を再読み込みすることは可能ですか?

例えば、あるページに画像を掲載していますが、ユーザーの操作によって物理的な画像を変更することができます。これは、ファイル名が変わるという意味ではなく、実際のファイルそのものが変わるという意味であることに注意してください。

ie:

  • ユーザーがデフォルトのページで画像を閲覧する
  • ユーザーが新しい画像をアップロードする
  • ページ上のデフォルト画像は変更されない(ファイル名が同じであるため、ブラウザはキャッシュされたバージョンを使用するためと推測される)

以下のコードを何度呼び出しても、同じ問題が発生します。

$("#myimg").attr("src", "/myimg.jpg");

jQueryのドキュメントでは、"load"関数は、要素のロードの成功/完了にコールバック関数をバインドするのではなく、イベントを発射するデフォルトメソッドを持っていれば完璧です。

何かお手伝いいただけることがあれば、ぜひお願いします。

解決方法は?

ブラウザが画像をキャッシュしているのが原因のようですね(質問文に書いてあることに今気づきました)。このように変数を追加で渡すことで、ブラウザに画像を再読み込みさせることができます。

d = new Date();
$("#myimg").attr("src", "/myimg.jpg?"+d.getTime());