ミギムキ

[jQuery] F5更新しても画像が更新されない原因と対策

公開日:2019/11/20 更新日:2019/11/24

"画像の差し替えを依頼されて対応したものの、クライアントから「画像が変わってないよ」と言われてしまった"
サイト制作あるあるの一つだと思います
差し替え前の画像がキャッシュとして残っていることが原因で、「CtrlキーとF5を押してみてください」と言えばそれで済む話ではありますが、クライアントに「あなたの指摘ミスですよ」と言っているようでお互いにあまりいい気はしません
サイト側で画像キャッシュを制御し、制作中は常に最新の画像が参照されるようにすればこのようなやり取りを解消することができます
JavaScript版のサンプルコードはこちら

サンプルコード

jQuery(function($) {
    $('img').each(function() {
        var src = $(this).attr('src');
        if(!src.startsWith('data:image/')) {
            var date = new Date();
            $(this).attr('src', src + '?ts=' + (date.getMonth() + 1) + date.getDate() + date.getHours());
        }
    });
});

仕組みの解説・補足

画像のキャッシュはファイル名を元に行われます。キャッシュされていないファイル名の画像が設定されていると、ブラウザがその画像をサーバーからダウンロードします
よって、表示時に画像のファイル名を変えてしまえば、常にファイル名の異なる新しいファイルとして扱われるようになります
ページを表示する際、ページ内のimgタグをすべてチェックし、src属性に設定された画像のパス名に「?ts=」と、そのときの時間を設定しています
例えば「./images/sample.jpg」というパス名であれば「./images/sample.jpg?ts=123110」という形に書き換えます
これでサーバー上のファイル名は変えることなく、表示するときにファイル名を書き換え（たことにして）、キャッシュを無効化。常に最新の画像が表示されるようになります

注意点

キャッシュされず、画像のダウンロードが行われるためページの表示速度が落ちます
制作や更新作業が完了した際は、忘れずこのコードを削除して正常にキャッシュが動作するようにしましょう
サンプルコードのタイムスタンプでは、一時間以内に再アクセスするとキャッシュされた画像がそのまま表示されます。作業状況を踏まえて時間は調整してください

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

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

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