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

브라우저에서 실제로 버그가있는 것 같습니다. Firefox의 경우 http://bugs.webkit.org, Safari의 경우 https://bugzilla.mozilla.org/에 파일을 저장할 수 있습니다. 잠재적 인 브라우저 버그가있는 이유는 무엇입니까? 브라우저는 다시로드 할 때 캐싱하지 않아야 함을 알고 있기 때문에 프로그래밍 방식으로 요청할 때 캐시 된 이미지 복사본을 제공합니다.

당신은 실제로 당신이 무엇인가를 그리는 것이라고 확신합니까? Canvas.drawImage API는 이미지가로드 될 때까지 기다리지 않으며, 이미지를 사용하려고 할 때 이미지가 완전히로드되지 않은 경우 그려주지 않을 spec입니다.

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'

(당신은 또한 단지 아니라 파싱 저장하는 문자열을 사용해서 또 다시 같은 문자열을 컴파일보다는에서는 setTimeout에 인수로 draw을 전달할 수 있습니다

더 좋은 방법은 같은입니다.)

출처

2008-10-03 01:10:12 olliej

가장 쉬운 방법은 슬링하는 것입니다 마지막에 쿼리 문자열 끊임없이 변화 :

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

어떤 사람들은 그 대신 escape(new Date())에 대한 Math.random()을 사용하여 선호. 그러나 올바른 방법은 캐싱을 허용하지 않기 위해 웹 서버가 보내는 헤더를 변경하는 것입니다.

출처

2008-10-03 00:43:27 Dan

Dan, 옛날 일종의 게시물이지만 나는 분명히 당신에게이 맥주를 빚지고있다. 정확히 내 상황은 아니지만 나에게 좋은 생각을 주었다. 감사! – brmore

'var url = 'http url ='http : //.../ something.png '+'? '+ Math.random()'하지만 끝내는 슬래시없이 사용해야했습니다. +1 머리말에 대한 조언 : –

당신은 아름다움, 나는이 작은 트릭을 잊어 버렸어! – JDandChips

자바에서 이미지를 캐싱하지 못하게 할 수 없습니다. 그러나, 당신은 이미지의 SRC/주소 장난감 새롭게 캐시를 강제로 할 수 있습니다

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

당신은 아마 아약스 캐시 솔루션 중 하나를 가지고 여기에 적용 할 수 있습니다.

출처

2008-10-03 00:44:03

실제적으로 두 개의 캐시가 필요합니다. 하나는 정상적인 HTTP 캐시이므로 이미지에서 올바른 HTTP 헤더를 사용하지 않아도됩니다. 그러나 브라우저에서 이미지의 메모리 내 복사본을 다시 사용하지 못하게해야합니다. 캐시 헤더를 확인하면 캐시를 조회 할 수 없으므로 HTTP 헤더가 도움이되지 않습니다.

이 문제를 방지하려면 쿼리 문자열 변경 또는 조각 식별자 변경 중 하나를 사용할 수 있습니다.

자세한 내용은 내 게시물 here을 참조하십시오.

출처

2014-03-15 21:42:57 Doin

JavaScript : Image()가 브라우저 캐시를 사용하지 않도록 설정하는 방법?

답변

관련 문제