JavaScript：如何强制Image()不使用浏览器缓存？
时间：2020-03-06 15:03:27 来源:igfitidea点击:
如果我在浏览器中手动加载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>
解决方案
最简单的方法是将不断变化的查询字符串添加到末尾：
var url = 'http://.../?' + escape(new Date())
有些人更喜欢使用Math.random()而不是escape(new Date())。但是正确的方法可能是更改Web服务器发送的标头以禁止缓存。
我们不能阻止它在Javascript中完全缓存图像。但是，我们可以使用图片的src /地址进行设置，以强制其重新缓存：
[Image].src = 'image.png?' + (new Date()).getTime();
我们可能可以采用任何Ajax缓存解决方案并将其应用于此处。
这实际上听起来像是浏览器中的错误-如果在Safari或者Firefox的https://bugzilla.mozilla.org/中，则可以在http://bugs.webkit.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而不是使用字符串，这样可以省去一遍又一遍地重新解析和编译同一字符串的麻烦。)
