Question

如果我在浏览器中手动加载nextimg URL，则每次重新加载时都会显示新图片。但是这段代码在draw()的每次迭代中显示相同的图像。

如何强制myimg不被缓存？

<html>
  <head>
    <script type="text/javascript">
      function draw(){
        var canvas = document.getElementById('canv');
        var ctx = canvas.getContext('2d');
        var rx;
        var ry;
        var i;

        myimg = new Image();
        myimg.src = 'http://ohm:8080/cgi-bin/nextimg'

        rx=Math.floor(Math.random()*100)*10
        ry=Math.floor(Math.random()*100)*10
        ctx.drawImage(myimg,rx,ry);
        window.setTimeout('draw()',0);
      }
    </script>
  </head>
  <body onload="draw();">
    <canvas id="canv" width="1024" height="1024"></canvas>
  </body>
</html>

Answer 1

最简单的方法是将不断变化的查询字符串放到最后：

var url = 'http://.../?' + escape(new Date())

有些人更喜欢使用Math.random()代替escape(new Date())。但正确的方法可能是改变Web服务器发送的标头以禁止缓存。

Answer 2

你无法阻止它在Javascript中完全缓存图像。但是，您可以使用图像的src /地址来强制它重新缓存：

[Image].src = 'image.png?' + (new Date()).getTime();

您可以使用任何Ajax缓存解决方案并在此处应用它。

Answer 3

这实际上听起来像是浏览器中的错误 - 如果是在Safari中，则可以在http://bugs.webkit.org处提交，对于Firefox，可以在https://bugzilla.mozilla.org/处提交。为什么我说潜在的浏览器错误？因为浏览器意识到它不应该在重新加载时缓存，但是当你以编程方式请求时，它确实会为你提供一个缓存的图像副本。

那说你确定你真的在画任何东西吗？ Canvas.drawImage API不会等待加载图像，并且当您尝试使用图像时，如果图像没有完全加载，则指定不绘制。

更好的做法是：

    var myimg = new Image();
    myimg.onload = function() {
        var rx=Math.floor(Math.random()*100)*10
        var ry=Math.floor(Math.random()*100)*10
        ctx.drawImage(myimg,rx,ry);
        window.setTimeout(draw,0);
    }
    myimg.src = 'http://ohm:8080/cgi-bin/nextimg'

（您也可以将draw作为参数传递给setTimeout而不是使用字符串，这将保存重组并反复编译相同的字符串。）

Answer 4

实际上您需要绕过两个缓存：一个是常规HTTP缓存，您可以通过在映像上使用正确的HTTP标头来避免这种情况。但是你也必须阻止浏览器重新使用图像的内存副本;如果它决定它可以做到这一点，它将永远不会到达查询其缓存的程度，因此HTTP标头不会有帮助。

为防止这种情况发生，您可以使用更改的查询字符串或更改的片段标识符。

有关详细信息，请参阅我的帖子here。

JavaScript：如何强制Image（）不使用浏览器缓存？

4 个答案: