NEW ARTICLE
kotlin 「if」文を使用する
  1. HOME
  2. javascript
  3. javascript 画像をキャッシュ化させないようにする

javascript 画像をキャッシュ化させないようにする

javascript 画像をキャッシュ化させないようにする

javascriptで、画像をキャッシュ化させないようにするサンプルコードを掲載してます。ブラウザはchromeを使用しています。

目次

環境

  • OS windows10 pro 64bit
  • Apache 2.4.43
  • ブラウザ chrome 104.0.5112.81
Javascript サンプル集はこちら

キャッシュ化させない

キャッシュ化させないするには、ファイル名の後ろにクエリパラメータを現在時刻などを使用して付与します。

<img id="sample" />

<button id="btn">取得</button>

<script>

'use strict';

window.onload = function(){
    document.getElementById('sample').src = `sample.gif?${(new Date).getTime()}`
}

</script>
use strictについてはこちら
${}(テンプレートリテラル)の使い方

実行結果を見ると、リロードするごとに別のクエリパラメータが付与されているが確認できます。

画像のパスは「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()}` }
アロー関数の使い方
document.getElementByIdの省略して記述する