2

I am currently attempting to create a simple test to test the speed of the client's PC by rendering an image. The issue is on browsers such as Safari and Chrome images a saved in some way to allow for a quick reload speed. For example when using the following code

var speed = document.getElementById('speed');
var startTime = new Date().getTime();
var img = new Image();
img.onload = function() {
    var stopTime = new Date().getTime();
    var loadtime = Math.round((stopTime - startTime) / 100);
}
img.src = "testImage.jpg";

The variable loadtime is 8 at first and then 0 after a refresh. My guess is Safari saves the image to load it instantly. On Chrome it's the same issue unless I do a hard reload. I've tried putting these meta tags but with no luck.

<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="-1" />

I've also tried

location.reload(true);

As suggested here but it doesn't seem to do the trick.

Is it possible to force a hard reload without the client's consent or chose? Or is it some sort of security infringement?

Jack
  • 1,893
  • 1
  • 11
  • 28

2 Answers2

3

Setting meta tags and reloading the HTML page does not affect the caching of the image. If you want to avoid caching the image try appending a random query parameter each time for example. 

img.src = "testImage.jpg?q=" + Math.random().toString(16).slice(2);
AJcodez
  • 31,780
  • 20
  • 84
  • 118
2

You could add a harmless query parameter to the end of the url to break the browser's caching:

img.src="testImage.jpg?noop=<incrementing_number_here>"
Danny Delott
  • 6,756
  • 3
  • 33
  • 57