CODEWITHSUNDEEP
javascripthtmlimagecachingreload
Balu
Balu

Reputation: 137

What is the best way to not to cache the image in html5?

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

Upvotes: 0

Views: 157

Answers (4)

Aditya
Aditya

Reputation: 4463

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);?>'/>

Upvotes: 0

Kornel
Kornel

Reputation: 100200

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.

Upvotes: 1

Rom
Rom

Reputation: 51

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!

Upvotes: 0

James
James

Reputation: 13511

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.

Upvotes: 0

Related Questions