お知らせ
2023.12.5(Tue)
目次
こんにちは。都築です。
知らないと意外とはまってしまう!? 今日は知らないと意図しない挙動になってしまう、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>
変更前と変更後の画像名が同じ場合、ブラウザが同じ画像と判断してしまい、画像の中身が変更されていたとしても、キャッシュされている画像が表示されてしまいます。
この現象を解決するには、前回と異なるリクエストと判定される必要があり、以下の様にX.jpgを要求する際にパラメータとして渡すことによって、異なるリクエストと判定されます。
document.img1.src = 'X.jpg' + '?' + Z;
毎回サーバーサイドに画像を取得しにいくのはキャッシュの良さを無くすことになります。
しかし、画像の更新頻度が高いページや、毎回最新の画像を表示する必要がある場合はキャッシュを意識し、適切な画像が表示されるよう意識していきましょう。