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

如果我在浏览器中手动加载nextimg URL，它会在每次重新加载时给出一张新图片。但是这段代码在draw()的每次迭代中都会显示相同的图像。JavaScript：如何强制Image（）不使用浏览器缓存？

我该如何强制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>

来源

2008-10-03 Mark Harrison

这实际上听起来像是浏览器中的一个错误 - 如果它在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-03 01:10:12 olliej

最简单的方法是吊索不断变化的查询字符串到末尾：

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

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

来源

2008-10-03 00:43:27 Dan

丹，这是一种旧帖子，但我肯定欠你一杯啤酒。不完全是我的情况，但给了我一个好主意。谢谢！ – brmore 2009-09-04 18:57:13

你不能阻止它在Javascript中完全缓存图像。但是，你可以玩弄图像的src /地址，迫使它重新缓存：

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

你或许可以采取任何Ajax的缓存解决方案，并在此应用它。

来源

2008-10-03 00:44:03

实际上有两个缓存你需要绕过这里：一个是常规的HTTP缓存，你可以通过在图像上使用正确的HTTP头来避免。但是，您也必须停止浏览器重新使用映像的内存副本;如果它决定它可以做到这一点，它甚至不会去查询它的缓存，所以HTTP头文件无法帮助。

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

查看我的文章here了解更多详情。

来源

2014-03-15 21:42:57 Doin

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

回答

相关问题