So I have the following problem: I want my JavaScript to reload an image from my desktop so quickly that the picture in the browser changes as soon as I change/edit the picture on my desktop. It works as intended for maybe the first two times, but then I have to wait a couple of seconds before the picture on my browser changes to the new picture I have on my desktop.
As it's using the same URL, I have a cache breaker so that the browser always loads the new image and I specified at the top as a header that the cache shouldn't store the image, so the browser always checks the image on my desktop. What am I doing wrong? Why isn't it working as intended?
<html>
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">
<head>
<title>JavaScript Refresh Example</title>
</head>
<body>
<canvas id="canvas" width="2000" height="2000"/>
<script type="text/JavaScript">
var img = new Image();
var time = new Date();
function draw() {
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
context.drawImage(img, 0, 0);
}
function refreshImage() {
var timestamp = new Date().getTime();
var queryString = "?t=" + timestamp;
return "Bild1.jpg" + queryString;
}
function Animate() {
window.requestAnimationFrame(Animate);
draw();
img.src = refreshImage();
}
img.onload = function () {
Animate();
}
img.src = refreshImage();
</script>
</body>
</html>