Please help me with Cache Control

Hosting Support
1

I have a very simple HTML code that loops images, I use this to “power” a notice board which is nothing more than a TV with a browser. The images are stored on the hosting account with fixed names, 1, 2, 3, 4,5

When I change the images, I need the TV to fetch the new images. The TV is caching the images.

What I would like to do is have it validate is the images has changed or now, I have done the following in .htaccess but it is not doing the job. I can only get the new image if I refresh the whole page.

Is my .htaccess " wrong"

##################################################

DO NOT EDIT THIS FILE

Create a new .htaccess file in your htdocs

directory (or example.com/htdocs/ directory)

to add your own rules or override these rules.

##################################################

DirectoryIndex index.php index.html index.htm index2.html

Header set Cache-Control "max-age=0, must-revalidate"
2

you must create a .htaccess file inside your htdocs folder and then add your rules to it.

4 Likes
3

thanks a lot, i missed it

1 Like
4

still struggling with this, all i need is for the browser to check if the images changed every 1 minute.

The following is not achieving the result, the browser seems to just ignore and Cache forever… even if I delte the image it still shows it. Only if I refresh the page then the deleted images no longer show

Header set Cache-Control "max-age=60, must-revalidate"
5

That’s how it’s supposed to work. It doesn’t happen automatically. You have to refresh to see new changes.

6

but my code keep looping the images and fetching them again… I could resolve this by adding random chars to the file names (datetime is already created and can be used), but I would rather not get the image each time but rather every 1 minute (there are technical reasons why)


function showSlides() {
  let i;
  let slides = document.getElementsByClassName("mySlides");
  let dots = document.getElementsByClassName("dot");
  var currentdate = new Date(); 
  var datetime = (currentdate.getMonth()+1) + "1" + currentdate.getDay()  + "2" + currentdate.getHours()  + "3" +  currentdate.getMinutes()  + "4" +  currentdate.getSeconds();

  $('.randImg').each(function() {

    img = $(this);

    s=img.attr('src');
    if(s.indexOf('?')>0)
    {
    s = s.substring(0, s.indexOf('?'));
    }
    img.attr('src', s);

    });

  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";  
  }
  slideIndex++;
  if (slideIndex > slides.length) {slideIndex = 1}    
  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";  
  dots[slideIndex-1].className += " active";
  setTimeout(showSlides, 10000); // Change image every 2 seconds
}
</script>

</body>
</html>
7

if anyone can lend a hand, code is at www.parktowers.epizy.com/index.html

just need to be able to keep the image loop going and fetch new images if the images change

8

is that supposed to be done in real-time and not by refreshing the website? https://stackoverflow.com/ You may wanna ask your doubt here.

9

I checked your .htaccess file, and all I see is that you copied the base .htaccess file without any changes. So browser caching is working as it always does.

Please delete or empty the .htaccess currently in the htdocs folder, and create a new one with only these lines:

Header unset ETag
Header set Cache-Control "max-age=0, no-cache, no-store, must-revalidate"
Header set Pragma "no-cache"
Header set Expires "Wed, 01 Jan 1970 00:00:00 GMT"
2 Likes
10

thanks, I had left the main page without this and was doing testing using a clone folder. Let me try what you provided… My problem is I have been trying many similar codes, no-store was just stopping cache all together, and without no-store it was always caching forever. Been unable to nail the 1 minute cache

11

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.