ミギムキ

[JavaScript] F5更新で常に最新の画像を表示させたい

公開日:2019/11/24 更新日:2019/12/05

ブラウザキャッシュはサイトの表示速度を上げる大切な機能ですが、制作や更新作業でクライアントに表示確認をしてもらうときには邪魔になってしまうこともあります
JavaScriptを使用して画像のパスにタイムスタンプをつけることで、ページ読み込み時に「これはキャッシュしていない画像だ」とブラウザに認識させることができ、常に最新の画像が表示されるようになります
jQuery版のサンプルコードはこちら

サンプルコード

<script>
    var tags = document.getElementsByTagName('img');

    for(var i = 0; i < tags.length; i++) {
        var src = tags[i].getAttribute('src');
        if(!src.startsWith('data:image/')) {
            var date = new Date();
            tags[i].setAttribute('src', src + '?ts=' + (date.getMonth() + 1) + date.getDate() + date.getHours());
        }
    }
</script>

仕組みの解説・補足

「getElementsByTagName」でimgタグをすべて取得し、forループで回します
「getAttribute」でsrc属性の画像のパスを取得。現在の月＋日＋時に基づいたタイムスタンプをパスの末尾に付け足して「setAttribute」でsrc属性を更新します

注意点

ブラウザキャッシュは、サイトの表示速度を上げる重要な機能です
確認作業が終わったら該当コードを忘れずに削除して、ブラウザキャッシュが正常に働くようにしましょう

ご質問など受け付けています

記事の中でわかりにくかったところ、もっと知りたかったこと、間違っていることなど、何でもお気軽にご連絡ください。

ご連絡は下記フォームを利用いただくか、ツイッターアカウント@flat8migi宛てでもOKです。