画像を表示するページを作る時のポイント! JavaScriptを使用した画像更新でキャッシュを見ない方法

こんにちは。都築です。
 
知らないと意外とはまってしまう!? 今日は知らないと意図しない挙動になってしまう、JavaScriptでの画像更新の方法についてです。

変更前の画像と変更後の画像のファイル名が異なる場合

まず、変更前の画像と変更後の画像のファイル名が異なる場合ですが、この場合は難しいことはありません。
 
例えば、ボタン押下で画像が変更されるようにするには、以下のように画像のsrcを変更するだけで画像が更新されます。

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <script type="text/javascript">
    function chgImg(){
      document.img1.src = "Y.jpg";
    }
  </script>
</head>
<body>
  <img name="img1" src="X.jpg">
  <input type="button" style="height:50px;" value="画像更新" onclick="chgImg();">
</body>
</html>

変更前の画像名と変更後の画像名が同じ場合

次に、変更前の画像と変更後の画像のファイル名が同じ場合ですが、この場合はキャッシュを見てしまう可能性があるので工夫が必要です。
 
例えば、先ほどと同様にボタン押下で画像が変更されるようにするには、以下のように画像のsrcを変更します。

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <script type="text/javascript">
    function chgImg(){
      var timestamp = new Date().getTime();
      document.img1.src = "X.jpg?" + timestamp;
    }
  </script>
</head>
<body>
  <img name="img1" src="X.jpg">
  <input type="button" style="height:50px;" value="画像更新" onclick="chgImg();">
</body>
</html>

解説

変更前と変更後の画像名が同じ場合、ブラウザが同じ画像と判断してしまい、画像の中身が変更されていたとしても、キャッシュされている画像が表示されてしまいます。
 
js_cache1
 
この現象を解決するには、前回と異なるリクエストと判定される必要があり、以下の様にX.jpgを要求する際にパラメータとして渡すことによって、異なるリクエストと判定されます。

document.img1.src = 'X.jpg' + '?' + Z;

 
画像を要求しているので、パラメータを渡しても特に使用されませんが、「今回は前回と異なるリクエストなので、前回キャッシュした画像を使えない」と判定され、サーバーに最新の画像を取得にいきます。
 
js_cache2
 
 
このZが毎回異なる値となるようにtimestampを使用することによって、毎回異なるリクエストと判定され、毎回最新の画像が取得される仕組みとなっています。

まとめ

毎回サーバーサイドに画像を取得しにいくのはキャッシュの良さを無くすことになります。
 
しかし、画像の更新頻度が高いページや、毎回最新の画像を表示する必要がある場合はキャッシュを意識し、適切な画像が表示されるよう意識していきましょう。

記事をシェア
MOST VIEWED ARTICLES