Así que tengo el siguiente problema: quiero que mi JavaScript vuelva a cargar una imagen desde mi escritorio tan rápido que la imagen en el navegador cambie tan pronto como cambie/edite la imagen en mi escritorio. Funciona según lo previsto quizás las dos primeras veces, pero luego tengo que esperar un par de segundos antes de que la imagen en mi navegador cambie a la nueva imagen que tengo en mi escritorio.
Como está usando la misma URL, tengo un interruptor de caché para que el navegador siempre cargue la nueva imagen y especifiqué en la parte superior como encabezado que el caché no debe almacenar la imagen, por lo que el navegador siempre verifica la imagen en mi escritorio. . ¿Qué estoy haciendo mal? ¿Por qué no funciona según lo previsto?
<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>