12

如果我在浏览器中手动加载 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>
4

4 回答 4

26

最简单的方法是将不断变化的查询字符串挂在末尾：

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

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

于 2008-10-03T00:43:27.133 回答
9

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

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

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

于 2008-10-03T00:44:03.340 回答
5

这实际上听起来像是浏览器中的一个错误——如果它在 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 而不是使用字符串，这将节省一遍又一遍地重新解析和编译相同的字符串。）

于 2008-10-03T01:10:12.390 回答
0

这里实际上需要绕过两个缓存：一个是常规 HTTP 缓存，可以通过在图像上使用正确的 HTTP 标头来避免。但是您还必须阻止浏览器重新使用图像的内存副本；如果它决定它可以做到这一点，它甚至永远不会到达查询其缓存的地步，因此 HTTP 标头将无济于事。

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

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

于 2014-03-15T21:42:57.467 回答