0

I'm trying to make my webpage do a hard refresh once every 30 seconds or so, but fail to get any result.

This is the code of the webpage. It shows a picture. The picture is replaced once every minute with a new one, in an external process. (The new picture has the same name) I just want to show the latest version.

<html>
<head>
<body>
    <img src="avatar.png" height= 1500>
</body>
</html>

I've tried to add this between head and /head

<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">
<script>
    function autoRefresh() {
        location.reload(true);
    }
    setInterval('autoRefresh()', 5000);
</script>

I've also tried

<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">
<script>
    function autoRefresh() {
        window.location = window.location.href;
    }
    setInterval('autoRefresh()', 5000);
</script>

But non of them works. The webpage refreshes but with the same picture.

If I press Shift+F5 in the browser the picture changes.

Anyone have a clue how to do this?

Jens
  • 183
  • 1
  • 10
  • 1
    Adjusting the caching rules for the HTML document isn't going to help if the image is cached. – Quentin Oct 02 '22 at 12:15
  • 1
    To hard refresh all the static elements of a page you would have to read through all the a, link, script and img elements and append a random query string to the end of each external reference after the hard reload. – Leonardo T. Oct 02 '22 at 12:17
  • 1
    Serve the image with an appropriate cache HTTP header that instructs the browser to not cache the image, or only for a short time. – deceze Oct 02 '22 at 12:21
  • I'm curious to know if changing the attribute `src` for the same image path will provide any changes, instead of refreshing the page. Refreshing the whole page can be annoying, especially if filling a form – Cid Oct 02 '22 at 12:23
  • 1
    Does this answer your question? [Refresh image with a new one at the same url](https://stackoverflow.com/questions/1077041/refresh-image-with-a-new-one-at-the-same-url) – Cid Oct 02 '22 at 12:26

2 Answers2

2

Thank you for all the answers. This made it work:

<html>
<head>
<script>
    function autoRefresh() {
        img1.src = "Avatar.png?=" + new Date().getTime();
    }
    setInterval('autoRefresh()', 5000);
</script>
</head>
<body>
    <img src='Avatar.png' id='img1' name='img1'>
</body>
</html>

Just one question? Does this save all the pictures in the cache? Like for every update a new image is saved in the cache? Or does this replace the image in the cache?

Jens
  • 183
  • 1
  • 10
0

You can use <meta> to refresh the page every 30 seconds (HTML Redirections on MDN).

However, to reload without caching you should modify the image URL every time. (e.g. UNIX timestamp as a GET parameter)

Example:

<html>
  <head>
    <!-- 0 is the time **before** the redirect. -->
    <meta http-equiv="Refresh" content="0; URL=https://example.com/" />
  </head>
  <body>
    <img id="image" src=""/>
  </body>
  <script>
  document.GetElementById("image").src = "/image.png?" + new Date().getTime();
  </script>
</html>
Hitsuki
  • 31
  • 8