जावास्क्रिप्ट: छवि कैश को कैसे बल दें() ब्राउज़र कैश का उपयोग न करें?

यदि मैं ब्राउज़र में मैन्युअल रूप से अगलीimg यूआरएल लोड करता हूं, तो हर बार जब मैं पुनः लोड करता हूं तो यह एक नई तस्वीर देता है। लेकिन कोड का यह बिट एक ही छवि को 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>

स्रोत

2008-10-03 Mark Harrison

यह वास्तव में ब्राउज़र में एक बग की तरह लगता है - यदि आप सफारी में हैं या https://bugzilla.mozilla.org/ फ़ायरफ़ॉक्स के लिए http://bugs.webkit.org पर फ़ाइल कर सकते हैं। मैं संभावित ब्राउज़र बग क्यों कहूं? चूंकि ब्राउज़र को पता चलता है कि इसे पुनः लोड पर कैशिंग नहीं होना चाहिए, फिर भी जब आप इसे प्रोग्रामेटिक रूप से अनुरोध करते हैं तो यह आपको छवि की कैश की गई प्रतिलिपि देता है।

क्या कहा गया है कि आप वाकई कुछ भी चित्रित कर रहे हैं? Canvas.drawImage API किसी छवि को लोड करने की प्रतीक्षा नहीं करेगा, और जब आप इसका उपयोग करने का प्रयास करते हैं तो छवि पूरी तरह से लोड नहीं होती है, तो ड्रॉ करने के लिए spec'd नहीं है।

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 के लिए एक तर्क के रूप पारित कर सकते हैं बल्कि एक स्ट्रिंग है, जो reparsing की बचत होगी का उपयोग करने और बार-बार एक ही स्ट्रिंग संकलन से:

एक बेहतर अभ्यास की तरह कुछ है।)

स्रोत

2008-10-03 01:10:12 olliej

सबसे आसान तरीका गोफन है एक कभी बदलते अंत पर querystring:

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

कुछ लोगों को लगता है कि बजाय escape(new Date()) के लिए Math.random() उपयोग करने को प्राथमिकता। लेकिन संभवतः हेडर को बदलने का सही तरीका वेब सर्वर कैशिंग को अस्वीकार करने के लिए भेजता है।

स्रोत

2008-10-03 00:43:27 Dan

दान, पुरानी पोस्ट की तरह, लेकिन मुझे निश्चित रूप से इस पर एक बियर देना है। बिल्कुल मेरी स्थिति नहीं, लेकिन मुझे अच्छा विचार दिया। धन्यवाद! – brmore

मुझे इसे अंतिम स्लैश के बिना उपयोग करना था: 'var 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

जावास्क्रिप्ट: छवि कैश को कैसे बल दें() ब्राउज़र कैश का उपयोग न करें?

उत्तर

संबंधित मुद्दे