JSで定期的に更新する画像を再読み込みして、表示する方法

定期的に更新される画像（ライブカメラなどリアルタイムで更新）をホームページに取り込みたい！って相談を受けたことはないでしょうか？

単純にリンクを貼るだけなら良いのですが、10分置きに自動更新したい。

ブラウザのキャッシュで自動更新されないのはさけたい。

複数の画像をスライダーで切り替えて見せたい。

など、いろいろ不安要素がありますよね。

JavaScriptで解決しよう！

JavaScriptで解決しよう！

今回は、ブラウザ自体をリロード（再読み込み）するのではなく、画像そのものを再読み込みします。

外部画像のためAjaxが使えない

画像は、外部サーバにあるため、XMLHttpRequest(Ajax)で呼び込むと、セキュリティ上エラーになり読み込むことができません。

Ajaxを使わない方法で対応します。

<section class="lazy slider">
    <div>
      <img data-src="https://www.exsamle.com/images/aaaa.jpg">
    </div>
    <div>
      <img data-src="https://www.exsamle.com/images/bbbb.jpg"">
    </div>
    <div>
      <img data-src="https://www.exsamle.com/images/cccc.jpg"">
    </div>
  </section>
  <script>
    window.addEventListener('DOMContentLoaded', function(){
      var img_list = document.querySelectorAll("img");
      for(var i=0; i<img_list.length; i++) {
        img_list[i].src = img_list[i].getAttribute("data-src");
      }
    });
    $(document).on('ready', function() {
      $(".slider").slick({
        dots: false,
        vertical: false,
        centerMode: false,
        arrows:false,
        autoplay:true,
        autoplaySpeed:5000
      });
      $(".lazy").slick({
        lazyLoad: 'ondemand',
        infinite: true
      });
    });
  document.addEventListener('DOMContentLoaded', function(){
        const LOADTIME = 10*60*1000;
        function reload(){
            var img_list = document.querySelectorAll("img");
            for(var i=0; i<img_list.length; i++) {
             img_list[i].src = img_list[i].getAttribute("data-src")  + '?' + Date.now();
            }
        }
        setInterval(reload, LOADTIME);
      });
  </script>

自動更新について

setInterval()関数を利用すれば、決められた間隔ごとに処理が可能ですね！

10分おきにreload関数を実行します。

ブラウザのキャッシュで同じファイル名だと、キャッシュが残り画像が切り替わらない現象が起きます。

Date.now();で、現在のタイムスタンプを設定し、ブラウザがキャッシュ以外のファイルという認識させます。

スライダーで切り替え

今回複数の画像を自動で切り替えて欲しいという要望がありました。

jQueryのslickというプラグインを利用して実装しました。

これで複数画像を一定時間で再読み込みして、表示する方法は解決です。

※あくまでも自己責任でお願いします。