0

I have an application which is overwriting the image (in localhost) every 40 milliseconds. I am trying to load that image (same name and from localhost) in the HTML5 image tag also every 40 milliseconds. The problem is after loading the first image, image is stored in cache and the HTML5 is not loading the new image (same name).

I was searching and have seen (for example Basic HTML5 caching) cache.manifest issues, but couldn't solve my problem. What is the best way to not to cache the image in html5?

thak you

Community
  • 1
  • 1
Balu
  • 137
  • 2
  • 11
  • 2
    If you are using `` try using ` where v = number is a unique version of your img source ?? – Aditya May 02 '14 at 15:04

4 Answers4

1

Same as always, don't do that in HTML. Make the server add HTTP header:

Cache-Control: no-cache

to the image response.

Otherwise you're filling browser's cache with rubbish copies with random filenames, and that pushes useful files out of the cache.

See other answers for server-specific configuration.

Community
  • 1
  • 1
Kornel
  • 97,764
  • 37
  • 219
  • 309
0

Make the request unique in some way, as Aditya has suggested in a comment below your question, by appending a querystring parameter or something similar.

James
  • 13,092
  • 1
  • 17
  • 19
0

You can try versioning the source for your images:

Eg:

<img src='/source?v=1.2'/>

I do recommend using timestamp as a version number because it will be unique for each milli-second, as you loading a lot of images per milli-seconds.

So, If you are using php , you can get the timestamp using time()

<img src='/source?v=<? echo microtime(true);?>'/>
Aditya
  • 4,453
  • 3
  • 28
  • 39
0

If you change the source (e.g. by adding the extra param), the cache won't work. You can do it in JS by changing the <img> src (yes, every 40 ms), for instance in following way (considering the img variable is the reference to the <img> tag):

img.src = '/source?nocache=' + (new Date()).getTime()

Good luck!

Rom
  • 51
  • 1
  • 2