javascriptやjQueryで画像を書き換えても変わらない場合
2024/02/28
けっこう前に画像をアップロードしてリアルタイムにプレビューする機能を作った時に、ブラウザによっては同じ画像が表示されるという現象が発生していた。キャッシュが原因のようで画像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でタイムスタンプを付けたい場合
関連記事
-
-
Dropzone.jsを使って画像をドラッグ&ドロップでアップロードする方法
画像を複数枚ドラッグ&ドロップでアップロードしたかった。だいぶ前にDro ...
-
-
Lightboxで画像拡大時にダウンロードリンクを設置する方法
Lightboxで画像拡大時にダウンロードリンクを設置したいと要望を受けた。もち ...
-
-
jQueryの画像スライダー用プラグイン「slick」の使い方
jQueryの画像スライダー用プラグイン「slick」の使い方についてソースコー ...
-
-
「slick」でブラウザ幅がPCの場合はスライダーを表示し、スマホ幅の場合はスライダー無しにする方法
slickプラグインで画像スライダーを設置しているページがあり、PCのブラウザ幅 ...
-
-
jQueryで画像を遅延ロードする「jquery.lazyload.js」の利用方法
画像を遅延ロードさせたい時にはjQueryプラグインのlazyloadが便利。以 ...