'My JavaScript program doesn't reload picture as quickly as I want

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>

javascript http-headers

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'My JavaScript program doesn't reload picture as quickly as I want

Sources

Related Questions