勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

javascriptやjQueryで画像を書き換えても変わらない場合

   2024/02/28  jQuery JavaScript

けっこう前に画像をアップロードしてリアルタイムにプレビューする機能を作った時に、ブラウザによっては同じ画像が表示されるという現象が発生していた。キャッシュが原因のようで画像URLにタイムスタンプを付与することで解決できた。以下に対応方法をメモ。

 

ソースコード

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

timestamp部分はJavaScriptで取得しているがjQueryの場合は以下でも取得できる。

var timestamp = jQuery.now();

 

リファレンス

https://api.jquery.com/jQuery.now/

 

PHPでタイムスタンプを付けたい場合

imgタグのsrc属性のURLにPHPでタイムスタンプを付与しキャッシュ対策する方法

 - jQuery JavaScript

  関連記事

画像をアップロードすると複数サムネイルを生成する方法
画像をアップロードすると複数サムネイルを生成する方法

フォームで画像をアップロードすると、予め定めておいた大中小のサイズでサムネイル画 ...

summernoteにギャラリーから画像を挿入する機能を追加する方法
summernoteにギャラリーから画像を挿入する機能を追加する方法

summernoteの画像機能はデフォルトだと「画像ファイルを選ぶ」「URLから ...

javascriptで画像を取り扱う際の注意
javascriptで画像を取り扱う際の注意

javascriptで画像を取り扱う際に、 ちゃんと要素を指定しているのにも関わ ...

画像をドラッグ&ドロップでアップロード
画像をドラッグ&ドロップでアップロード

■2015/04/15追記 以下記事の方が新しくて詳しい。 http://tai ...

jQueryのプラグインで簡単にイメージスライダーを作成(bxslider)
jQueryのプラグインで簡単にイメージスライダーを作成(bxslider)

画像のスライダーを作る時に便利なプラグインであるbxslider。簡単に使えるし ...