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

ここで実際にバイパスする必要があるキャッシュは2 つあります。1 つは通常の HTTP キャッシュで、画像に正しい HTTP ヘッダーを使用することで回避できます。ただし、ブラウザがメモリ内の画像のコピーを再利用しないようにする必要もあります。それができると判断した場合、キャッシュを照会することさえできないため、HTTP ヘッダーは役に立ちません。

これを防ぐには、変更クエリ文字列または変更フラグメント識別子のいずれかを使用できます。

詳細については、こちらの私の投稿を参照してください。

于 2014-03-15T21:42:57.467 に答える