Force reload image and clearing cache

Question

I have a Raspberry Pi overwriting an image on a webserver (not on RPI) using FTP every 1 minute. The problem is that my Refresh button on the webpage don't work as the image is cached. I just see the old image again when my button make the webpage load.

Hitting CRTL+F5 shows the new image but since I want to use this webpage on a smartphone I need a better solution.

I don't want automatic reload page every xx seconds, I want a button that does that manually. But how?

My webpage:

<body>   
    <p style="text-align:center;">
        <A HREF="javascript:history.go(0)">Click to refresh the page</A>
        <img src="CAM2.png" alt="Camera 2" width="100%">
    </p>
</body>

I am not writing my HTML dynamically, it's just a simple plain oldfashioned html page where i replace the image file — Claus, Jun 06 '19 at 11:28
it should work.you just need to override the url.each time.or you can fetch image dinamically — Madhawa Priyashantha, Jun 06 '19 at 11:41

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

A standard trick is to append a unique number to the image, as shown. You can use Javascript or PHP or some other tool to create a random number each time the DOM or page is loaded.

<script type='text/javascript'>
    function refresh() {   
        var rand = Math.floor(Math.random() * 10000)
        document.getElementById("imgId").src="CAM2.png?" + rand;
    }
</script>

<body>   
    <p style="text-align:center;">
        <A HREF="#" onclick='refresh()'>Click to refresh the page</A>
        <img src="CAM2.png" id='imgId' alt="Camera 2" width="100%">
    </p>
</body>

What the above script does:

First generates a random number. Updates the unique img tag (with the id) with the image source (src) and the appended unique number. Number changes each time the anchor is clicked.

Example

For the purposes of illustration; the example below changes the image url as well as the src string. I have also done some minor HTML tidying up.

    function refresh() {   
        var rand = Math.floor(Math.random() * 10000);
        var exampleOnly = Math.floor(Math.random() * 200);
        document.getElementById("imgId").src="https://picsum.photos/id/"+exampleOnly+"/500/300?" + rand;
    }

<body>   
    <p style="text-align:center;">
        <A HREF="#" onclick='refresh()'>Click to refresh the page</A></p>
<p style="text-align:center;"> <img src="https://picsum.photos/id/21/500/300" id='imgId' alt="Camera 2" >
    </p>
</body>

score 1 · Answer 2 · answered Jun 06 '19 at 11:53

You can add the time in miliseconds at the end of every file when you contruct the page. I usually get the modify time from the file and i contruct the src like this on php:

<img src="CAM2.png?<php echo filemtime( $file ); ?>" alt="Camera 2" width="100%">

will finally looks like this:

<img src="CAM2.png?1559820115091" alt="Camera 2" width="100%">

and every time you refresh the page the src will change and this forces the browser to get the image again because is not the same, but its totally transparent for your code.

If you can't use any server language to create the page this way, you can try calling a JS function from your href (or better from an "onclick"):

    function refresh_images() {
        // i will use the full numeric value in miliseconds that getTime returns
        var date = new Date();
        var time = date.getTime();
        // changes every image's src
        $("img").each(function(){
            // save the current url to work with it
            current_url = $(this).attr('src');
            // check if i already changed the url (by adding an ? followed by miliseconds)
            if( current_url.indexOf('?') > 0 ) {
                // i remove the all from ? to end
                current_url = current_url.substr(0, current_url.indexOf('?') );
            }
            // i add an ? to the end folloed by the time in miliseconds
            new_url  = current_url + "?" + time;
            // i change the src
            $(this).attr('src', new_url );
        })
    }

This function changes every src on your page, and the change forces the browser to check the server again for the new images. By adding the time at the end of each src, the images are "different" every time and the browser will load the images again.

The OP shows no signs they are using PHP – Martin Jun 06 '19 at 12:06 — Martin, Jun 06 '19 at 12:06
extraordinary, it seems that is working – Aak Apr 04 '23 at 22:43 — Aak, Apr 04 '23 at 22:43

score 0 · Answer 3 · answered Jun 06 '19 at 11:34

If you have access to your server's configuration, you can set the caching deadline in there to 0 mins. If you route all your traffic through e.g. Cloudflare you can also set the cache expiration in there. Another option is to use another filename for each image and update the HTML at the same time as the image. A little bit more effort than setting the cache expiration date once though.

score 0 · Answer 4 · answered Jun 06 '19 at 12:24

0

Take a look here: https://varvy.com/pagespeed/leverage-browser-caching.html

Set your cache timeout to 1 minute?

Regards, Leslie

answered Jun 06 '19 at 12:24

Leslie

11
3

What is the page gets reloaded by the user in 30 seconds? – Martin Jun 06 '19 at 12:28

Force reload image and clearing cache

4 Answers4

Example