Javascript 画像の自動更新

Javascript

2023.04.29

この記事では、一定間隔で更新されるサーバ上の画像を自動更新する方法を解説します。

大事なのは、imgタグのsrcのファイル名にパラメータを付与して常に違う画像であると認識させることです。

画像を自動的に更新
パラメータがないと更新されない
まとめ

画像を自動的に更新

setInterval(interruptMission, 1000);

function updateImage() {

    const imgEle = document.getElementById("imgEle");

    imgEle.src = "/img/fileName.png" + "?" + Date.now();
}

冒頭でも書いたように、重要なのはimgタグのsrcに入れるファイル名にパラメータをつける以下の部分です。
　imgEle.src = “/img/fileName.png” + “?” + Date.now();

「Date.now()」の部分は、現在の時刻を取得する命令になります。
imgタグのsrcにファイル名を代入する時の時間は毎回異なるものになります。
これによって、毎回キャッシュしていないファイルが代入されたと思わせることができ、そのため毎回画像ファイルをサーバから読み込ませられます。
上記コードでは、「setInterval」で1秒毎に画像を更新させています。

パラメータがないと更新されない

「 + “?” + Date.now();」の部分がない場合、毎回同じファイルを読み込ませることになります。
ブラウザにはキャッシュという機能があり、一度読み込んだファイルを保持しておきます。
一度読み込んだファイルを保持しておけば、次に同じファイルを表示する際にサーバまで取りに行かず、保持しているファイルから表示できます。
それによって、インターネットの表示が速くなります。
しかし、画像の自動更新をしたい場合は、このキャッシュが邪魔をしてしまいます。

つまり、「 + “?” + Date.now();」の部分がない場合、サーバから画像を読み込むのではなく、キャッシュから画像を読み込んでしまいます。
毎回キャッシュから画像を読み込むということは、毎回同じ画像を表示するということです。
それを防ぐために、ファイル名にパラメータをつける必要があります。