CODEWITHSUNDEEP
javascripthtmlinternet-explorercachingdojo
Jinxed
Jinxed

Reputation: 736

Disable caching of images only in browser(IE)

We are building an Single Page Application(dojo) which downloads all the content to the local storage and the browser cache(IE).We are pushing JSON files(data)to local storage and indexedDB. All the data is downloaded in Chrome and Firefox but in IE data is partially downloaded. In IE browser, cache limit is set to 10MB. We also see that the images get downloaded to temp folder.When we increase the allowed limit in cache and database to a higher value all the data is downloaded. enter image description here

We are predicting that the issue could be due to the images being downloaded to temp folder.As we are not allowed to increase the cache limit as it requires the change to be made at the organizational level we have to manage in our code.how can we disable downloading images to browser cache (temp folder) in an html page? Or Is there any other way that we can handle this issue?

Upvotes: 0

Views: 777

Answers (1)

GibboK
GibboK

Reputation: 73908

Add a randomly generated query string to each request for your image.

Example for image with query string:

<img src="image.png?8484744" />

This will prevent the browser to cache image locally.

Here a script for adding a dynamically created query string on src for all your image using dojo.

Live example, (please inspect the dom to see query strings):

https://jsfiddle.net/haw785rs/

require(['dojo/query', 'dojo/dom-attr'], function(query, domAttr) {
  var images = query('img');
  images.forEach(function(item) {
    domAttr.set(item, 'src', item.src + '?' + Date.now());
  });
})

<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" alt="Test" height="350" width="150">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" alt="Test" height="350" width="150">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" alt="Test" height="350" width="150">

You can also enforce this behavior on server side making sure your images are delivered with the header

Cache-control: max-age=0, must-revalidate

(I would suggest you to use the server approach together with a dynamic query string).

Upvotes: 1

Related Questions