javascript 画像をキャッシュ化させないようにする
- 作成日 2022.08.16
- javascript
- javascript
javascriptで、画像をキャッシュ化させないようにするサンプルコードを掲載してます。ブラウザはchromeを使用しています。
環境
- OS windows10 pro 64bit
- Apache 2.4.43
- ブラウザ chrome 104.0.5112.81
キャッシュ化させない
キャッシュ化させないするには、ファイル名の後ろにクエリパラメータを現在時刻などを使用して付与します。
<img id="sample" />
<button id="btn">取得</button>
<script>
'use strict';
window.onload = function(){
document.getElementById('sample').src = `sample.gif?${(new Date).getTime()}`
}
</script>
実行結果を見ると、リロードするごとに別のクエリパラメータが付与されているが確認できます。
画像のパスは「img」タグに指定して、付与することも可能です。
<img id="sample" src="sample.gif" />
<script>
'use strict';
window.onload = function(){
document.getElementById('sample').src = document.getElementById('sample').src + `?${(new Date).getTime()}`
}
</script>
コードの簡潔化
また、javascript部はwindowオブジェクトやdocument.getElementByIdを省略して「id名」のみで記述することも可能です。関数もアロー関数を使用できます。
onload = () => { sample.src = `${sample.src}?${(new Date).getTime()}` }
-
前の記事
Linux rmコマンドで削除したファイルを確認する 2022.08.16
-
次の記事
C# 文字列内のダブルクォーテーションを除去する 2022.08.16
コメントを書く