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（）不使用瀏覽器緩存？

回答

相關問題