勉強したことのメモ

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

  関連記事

「slick」で作成したスライダー画像にランキングの順位を表示する方法

「slick」で作成したスライダー画像に対して、ランキングの順位を表示したいとい ...

サムネイルをクリックすると拡大画像を表示できる「Lightbox」の利用方法

画像をサムネイル表示してクリックしたら大きく表示する というのがLightbox ...

Lightboxで画像拡大時にダウンロードリンクを設置する方法

Lightboxで画像拡大時にダウンロードリンクを設置したいと要望を受けた。もち ...

jQuery.uploadでリアルタイムプレビュー

やりたい事は、 ・<input type="file">で画像を選択 ...

「slick」でスライダー中央の下部にのみ指定したコンテンツを表示する方法

「slick」でスライダー画像の下部に何らかのコンテンツ(テキスト・リンク・別画 ...