दिलचस्प पोस्ट
जावा में "संरक्षित" संशोधक एक ही पैकेज में अन्य वर्गों तक पहुंच की अनुमति क्यों देता है? मैं रेशे में हैश मान द्वारा हैश के सरणी के भीतर कैसे खोजूं? WinForms ऐप में फोकस किए गए नियंत्रण पाने का पसंदीदा तरीका क्या है? पार्सलेल से परिवर्तनीय में संग्रहित कमान निष्पादित सी ++ में उद्देश्य विनाश हाइबरनेट कैशिंग कैसे अक्षम करें IOS 7 / Xcode 5: प्रवेश डिवाइस लॉन्च छवियां प्रोग्रामेटिक रूप से स्क्रिप्ट निष्पादन के बाद गनोम टर्मिनल से बचें? कैसे जांचें कि क्या एक जावास्क्रिप्ट क्लास एक दूसरे को प्राप्त करता है (एक obj के बिना)? बैश स्क्रिप्टिंग के साथ, मैं एक आदेश से सभी आउटपुट कैसे रोक सकता हूं? जेली बीन पर READ_LOGS अनुमति (एपीआई 16) MKMapView MKPoint अन्वेषण टैप ईवेंट पीएसआर -0 और पीएसआर -4 में क्या अंतर है? शब्दों को किसी संख्या में कैसे परिवर्तित करें? MySQL का प्रयोग करके तीन तालिकाओं में शामिल हो रहा है

एक ही यूआरएल पर एक नए के साथ छवि को ताज़ा करें

मैं अपनी साइट पर एक लिंक तक पहुंच रहा हूं जो प्रत्येक बार इसे एक्सेस किया जाता है।

मैं जो समस्या में चल रहा हूं वह है कि अगर मैं पृष्ठभूमि में छवि को लोड करने का प्रयास करता हूं और फिर पृष्ठ पर एक को अपडेट करने की कोशिश करता हूं, तो छवि बदलती नहीं है – यद्यपि यह अपडेट हो जाता है जब मैं पृष्ठ पुनः लोड करता हूं

var newImage = new Image(); newImage.src = "http://img.hiwab.com/javascript/image.jpg"; function updateImage() { if(newImage.complete) { document.getElementById("theText").src = newImage.src; newImage = new Image(); number++; newImage.src = "http://img.hiwab.com/javascript/image.jpg?time=" + new Date(); } setTimeout(updateImage, 1000); } 

फ़ायरफ़ॉक्स के रूप में हेडर उन्हें देखता है:

 HTTP/1.x 200 OK Cache-Control: no-cache, must-revalidate Pragma: no-cache Transfer-Encoding: chunked Content-Type: image/jpeg Expires: Fri, 30 Oct 1998 14:19:41 GMT Server: Microsoft-HTTPAPI/1.0 Date: Thu, 02 Jul 2009 23:06:04 GMT 

मुझे पृष्ठ पर बस उस छवि का ताज़ा करने की आवश्यकता है I कोई विचार?

वेब के समाधान से एकत्रित समाधान "एक ही यूआरएल पर एक नए के साथ छवि को ताज़ा करें"

Url के अंत में एक कैशब्रेकर जोड़ने का प्रयास करें:

 newImage.src = "http://img.hiwab.com/javascript/image.jpg?" + new Date().getTime(); 

जब आप छवि बना रहे हैं, तो यह स्वचालित रूप से वर्तमान टाइमस्टैम्प को जोड़ देगा, और यह कैश में एक को पुनः प्राप्त करने के बजाय ब्राउज़र की छवि को फिर से देखने देगा।

के विकल्प के रूप में …

 newImage.src = "http://img.hiwab.com/javascript/image.jpg?" + new Date().getTime(); 

…ऐसा लगता है…

 newImage.src = "http://img.hiwab.com/javascript/image.jpg#" + new Date().getTime(); 

… किसी भी अपस्ट्रीम कैश को बायपास किए बिना ब्राउजर कैश को बेवकूफ़ बनाने के लिए पर्याप्त है, यह मानते हुए कि आपने सही Cache-Control हेडर वापस लौटाया है हालांकि आप उपयोग कर सकते हैं …

 Cache-Control: no-cache, must-revalidate 

… आप If-Modified-Since या If-None-Match शीर्ष लेखों के लाभ खो देते हैं, तो ऐसा कुछ …

 Cache-Control: max-age=0, must-revalidate 

… ब्राउज़र को पूरी छवि को फिर से डाउनलोड करने से रोकना चाहिए अगर यह वास्तव में बदल नहीं गया है IE, Firefox, और Chrome पर परीक्षण और काम करना कष्टप्रद यह सफारी पर विफल रहता है जब तक आप का उपयोग नहीं …

 Cache-Control: no-store 

… हालांकि यह अभी भी सैकड़ों समान छवियों के साथ अपस्ट्रीम कैश भरने के लिए बेहतर होगा, खासकर जब वे अपने सर्वर पर चल रहे हों 😉

अपडेट (2014-09-28): आजकल यह Cache-Control: no-store तरह दिखता है Cache-Control: no-store क्रोम के लिए Cache-Control: no-store भी आवश्यकता है

मैंने यह कैसे करना है, इसके जवाब में बहुत बदलाव देखा है, इसलिए मैंने सोचा कि मैं उन्हें यहां संक्षेप में बताएगा (प्लस अपने खुद के आविष्कार की एक चौथी विधि जोड़ें):


(1) URL पर एक अद्वितीय कैश-बस्टिंग क्वेरी पैरामीटर जोड़ें, जैसे:

 newImage.src = "image.jpg?t=" + new Date().getTime(); 

पेशेवरों: समझने और लागू करने में 100% विश्वसनीय, त्वरित और आसान।

विपक्ष: छवि को दृश्यों के बीच में परिवर्तित होने पर पूरी तरह से कैशिंग को पूरी तरह से बायपास करता है, अनावश्यक देरी और बैंडविड्थ का उपयोग करना। संभावित रूप से ब्राउज़र की कैश (और किसी भी मध्यवर्ती कैश) को भरने के साथ ही, बहुत ही प्रतियां एक ही छवि के कई! इसके अलावा, छवि URL को संशोधित करने की आवश्यकता है

कब का उपयोग करें: जब छवि लगातार बदलती रहती है, जैसे लाइव वेबकैम फ़ीड के लिए उपयोग करें यदि आप इस पद्धति का उपयोग करते हैं, तो Cache-control: no-cache से छवियों को स्वयं सेवा दें Cache-control: no-cache HTTP हेडर !!! (अक्सर यह एक .htaccess फ़ाइल का उपयोग कर स्थापित किया जा सकता है)। अन्यथा आप धीरे-धीरे छवि के पुराने संस्करणों के साथ कैश को भरेंगे!


(2) क्वेरी पैरामीटर उस यूआरएल में जोड़ें जो फ़ाइल में तभी बदलता है, जैसे:

 echo '<img src="image.jpg?m=' . filemtime('image.jpg') . '">'; 

(यह PHP सर्वर-साइड कोड है, लेकिन यहां एक महत्वपूर्ण मुद्दा यह है कि एक = मी [फाइल अंतिम-संशोधित समय] क्वेरीस्ट्रिंग फ़ाइल नाम से जुड़ी हुई है)।

पेशेवरों: समझने और कार्यान्वित करने के लिए 100% विश्वसनीय, त्वरित और आसान, और कैशिंग फायदे पूरी तरह सुरक्षित रखता है।

विपक्ष: छवि URL को संशोधित करने की आवश्यकता है इसके अलावा, सर्वर के लिए थोड़ा और काम – उसे फ़ाइल-अंतिम-संशोधित समय तक पहुंच प्राप्त करना होगा। साथ ही, सर्वर-साइड जानकारी की आवश्यकता होती है, इसलिए ताज़ा छवि के लिए जांच करने के लिए पूरी तरह क्लाइंट-साइड-केवल समाधान के लिए उपयुक्त नहीं है।

उपयोग करने के लिए कब : जब आप छवियों को कैश करना चाहते हैं, लेकिन समय-समय पर उन्हें फ़ाइल नाम बदलकर बिना उन्हें सर्वर अंत में अपडेट करना पड़ सकता है और जब आप आसानी से यह सुनिश्चित कर सकते हैं कि आपके HTML में प्रत्येक छवि उदाहरण में सही क्विकस्ट्रिंग को जोड़ा गया है।


(3) हेडर Cache-control: max-age=0, must-revalidate साथ अपनी छवियों की सेवा करें Cache-control: max-age=0, must-revalidate , और यूआरएल को एक अद्वितीय मेम्काच -बस्टिंग टुकड़ा पहचानकर्ता जोड़ें, जैसे:

 newImage.src = "image.jpg#" + new Date().getTime(); 

यहां यह विचार है कि कैश-नियंत्रण हैडर ब्राउज़र कैश में छवियों को डालता है, लेकिन उन्हें तुरंत बाकियाँ चिह्नित करता है, ताकि प्रत्येक बार ब्राउज़र को फिर से प्रदर्शित किया जाए, यह देखने के लिए सर्वर से जांचना चाहिए कि क्या उन्होंने बदल दिया है या नहीं। यह सुनिश्चित करता है कि ब्राउज़र की HTTP कैश हमेशा छवि की नवीनतम प्रतिलिपि देता है। हालांकि, ब्राउज़रों अक्सर एक छवि की एक इन-मेमरी प्रतिलिपि का पुनः उपयोग कर लेते हैं, यदि उनके पास एक है, और उस स्थिति में उनकी HTTP कैश भी जांच नहीं कर सकते हैं इसे रोकने के लिए, एक टुकड़ा पहचानकर्ता का उपयोग किया जाता है: इन-मेमोरी छवि के src की तुलना में टुकड़ा पहचानकर्ता शामिल है, लेकिन यह HTTP कैश से पूछताछ करने से पहले छीन लिया जाता है। (इसलिए, उदा।, image.jpg#A और image.jpg#B दोनों ब्राउज़र की HTTP कैश में छवि। image.jpg प्रविष्टि से प्रदर्शित हो सकते हैं, लेकिन image.jpg#B कभी भी इन-मेमरी से बनाए रखा छवि डेटा का उपयोग नहीं किया जाएगा जब image.jpg#A पिछले प्रदर्शन किया गया था)।

पेशेवरों: HTTP कैशिंग तंत्र का उचित उपयोग करता है, और कैश्ड छवियों का उपयोग करता है यदि वे परिवर्तित नहीं हुए हैं उन सर्वरों के लिए काम करता है जो कतार स्ट्रिंग पर गड़बड़ी करते हैं, जो एक स्थिर छवि URL में जोड़े जाते हैं (चूंकि सर्वर कभी भी टुकड़े पहचानकर्ता नहीं देखते हैं – वे केवल ब्राउज़र के उपयोग के लिए होते हैं)।

विपक्ष: ब्राउज़र के कुछ संदिग्ध (या कम से कम खराब दस्तावेज) व्यवहार पर, अपने यूआरएल में टुकड़ा पहचानकर्ताओं के साथ चित्रों के संबंध में भरोसा करता है (हालांकि, मैंने इसे सफलतापूर्वक एफएफ 27, क्रोम 33, और आईई 11 में सफलतापूर्वक परीक्षण किया है)। क्या अब भी हर छवि दृश्य के लिए सर्वर को एक सत्यापन अनुरोध भेजता है, जो ओवरकिल हो सकता है यदि छवियों को शायद ही कभी बदल दिया जाता है और / या विलंबता एक बड़ी समस्या है (क्योंकि आपको कैडेट की गई छवि अभी भी अच्छी है, फिर भी पुनर्वितरण प्रतिक्रिया की प्रतीक्षा करने की आवश्यकता है) । छवि URL को संशोधित करने की आवश्यकता है

उपयोग करने के लिए कब: छवियों को बार-बार बदल सकते हैं या सर्वर-साइड स्क्रिप्ट की भागीदारी के बिना क्लाइंट के द्वारा आसानी से पुन: ताज़ा करने की आवश्यकता है, लेकिन जहां आप अभी भी कैशिंग का लाभ चाहते हैं। उदाहरण के लिए, एक लाइव वेबकैम का चुनाव करता है जो एक छवि को हर कुछ मिनटों में अनियमित रूप से अपडेट करता है वैकल्पिक रूप से, (1) या (2) के बजाय उपयोग करें यदि आपका सर्वर स्थिर छवि URL पर क्वेरीस्ट्रिंग को अनुमति नहीं देता है


(4) पहले एक छिपी हुई <iframe> में इसे लोड करके, और फिर iframe सामग्री पर location.reload(true) contentWindow location.reload(true) फोन करके जवाबी का उपयोग करके किसी विशेष छवि को जबरन ताज़ा करें।

ये चरण हैं:

  • छिपी हुई आइफ्रेम में रीफ्रेश होने के लिए छवि लोड करें। यह सिर्फ एक सेटअप चरण है – यदि वांछित हो, तो यह बहुत पहले से वास्तविक रीफ़्रेश में किया जा सकता है। इस बात पर भी कोई फर्क नहीं पड़ता कि छवि इस स्तर पर लोड होने में विफल रहती है!

  • एक बार ऐसा हो जाने पर, उस पृष्ठ की सभी प्रतियों को अपने पेज (पेजों) पर या किसी भी DOM नोड्स में कहीं भी रिक्त करें (जावास्क्रिप्ट वेरिएबल्स में संग्रहीत ऑफ-पेज वाले)। यह आवश्यक है क्योंकि ब्राउज़र अन्यथा छवि को एक बासी इन-मेमोरी कॉपी से प्रदर्शित कर सकता है (आईई 11 विशेष रूप से ऐसा करता है): आपको सुनिश्चित करना होगा कि सभी इन-मेमरी प्रतियों को साफ़ कर दिया जाए, HTTP कैश रीफ्रेश करने से पहले। यदि अन्य जावास्क्रिप्ट कोड अतुल्यकालिक चल रहा है, तो आपको उस कोड को उस समय में प्रति-री-रिफ्रेश की नई प्रतिलिपि बनाने से रोकना होगा।

  • iframe.contentWindow.location.reload(true) कॉल iframe.contentWindow.location.reload(true) । सशक्त बलों को एक कैश बाईपास, सर्वर से सीधे लोड हो रहा है और मौजूदा कैश्ड कॉपी को अधिलेखित कर रहा है।

  • एक बार यह पुनः लोड हो जाने पर, रिक्त छवियों को पुनर्स्थापित करें। वे अब सर्वर से ताजा संस्करण प्रदर्शित करना चाहिए!

समान-डोमेन छवियों के लिए, आप इमेज को सीधे आइफ्रेम में लोड कर सकते हैं क्रॉस-डोमेन छवियों के लिए, आपको इसके बजाय अपने डोमेन से एक HTML पृष्ठ लोड करना होगा जिसमें <img> टैग में छवि शामिल है, अन्यथा आप iframe.contentWindow.reload(...)

पेशेवरों: सिर्फ छवि .reload () समारोह की तरह काम करता है आप चाहते हैं कि डोम! छवियों को सामान्य रूप से कैश द्वारा अनुमति देता है (यदि आप उन्हें चाहते हैं तो इन-भविष्य की समाप्ति तिथियों के साथ भी, इस प्रकार से लगातार पुनरीक्षितकरण से बचने) वर्तमान पृष्ठ पर उस छवि के लिए या किसी अन्य पृष्ठ पर केवल क्लाइंट-साइड कोड का उपयोग करके यूआरएल को बदलने के बिना आपको एक विशेष छवि को ताज़ा करने देता है।

विपक्ष: जावास्क्रिप्ट पर निर्भर करता है हर ब्राउज़र में ठीक से काम करने की गारंटी नहीं 100% (मैंने इसे सफलतापूर्वक FF27, क्रोम33, और IE11 में सफलतापूर्वक परीक्षण किया है)। अन्य तरीकों के सापेक्ष बहुत जटिल।

उपयोग करने के लिए: जब आपके पास मूल रूप से स्थिर छवियों का एक संग्रह होता है जिसे आप कैशे करना चाहते हैं, लेकिन फिर भी उन्हें कभी-कभी उन्हें अपडेट करने और अपडेट होने के तुरंत दृश्य फ़ीडबैक प्राप्त करने की आवश्यकता होती है। (विशेषकर जब केवल पूरे ब्राउज़र पृष्ठ को ताज़ा करना, उदाहरण के लिए एएक्सएक्स पर निर्मित कुछ वेब ऐप में काम नहीं करेगा)। और जब तरीकों (1) – (3) संभव नहीं हैं (जो भी कारण से) आप उन सभी यूआरएल नहीं बदल सकते जो संभवत: आपके द्वारा अपडेट की जाने वाली छवि को प्रदर्शित कर सकते हैं। (ध्यान दें कि उन 3 तरीकों की छवि को रीफ्रेश किया जाएगा, लेकिन यदि कोई अन्य पृष्ठ उचित क्विकस्ट्रिंग या टुकड़ा पहचानकर्ता के बिना छवि प्रदर्शित करने की कोशिश करता है, तो इसके बजाय यह एक पुराना संस्करण दिखा सकता है)।

एक मजबूत और लचीली ढंग से इसे लागू करने का विवरण नीचे दिया गया है:

मान लीजिए कि आपकी वेबसाइट में रिक्त 1×1 पिक्सेल .gif यूआरएल पथ / /img/1x1blank.gif / /img/1x1blank.gif , और इसमें निम्नलिखित एक-लाइन PHP स्क्रिप्ट भी है (केवल क्रॉस-डोमेन छवियों को मजबूरता ताज़ा करने के लिए आवेदन करने के लिए आवश्यक है, और इसे फिर से लिखा जा सकता है यूआरएल पथ /echoimg.php पर किसी भी सर्वर साइड स्क्रिप्टिंग भाषा)

 <img src="<?=htmlspecialchars(@$_GET['src'],ENT_COMPAT|ENT_HTML5,'UTF-8')?>"> 

फिर, यह एक यथार्थवादी कार्यान्वयन है कि आप यह सब कैसे जावास्क्रिप्ट में कर सकते हैं। यह थोड़ा जटिल दिखता है, लेकिन बहुत सारी टिप्पणियां हैं, और महत्वपूर्ण फ़ंक्शन सिर्फ बल है ImgReload () – पहले दो केवल रिक्त और अन रिक्त छवियां, और अपने एचटीएमएल के साथ कुशलतापूर्वक काम करने के लिए डिज़ाइन किया जाना चाहिए, इसलिए उन्हें कोड दें आपके लिए सबसे अच्छा काम करता है; उनमें से अधिक जटिलताओं आपकी वेबसाइट के लिए अनावश्यक हो सकती हैं:

 // This function should blank all images that have a matching src, by changing their src property to /img/1x1blank.gif. // ##### You should code the actual contents of this function according to your page design, and what images there are on them!!! ##### // Optionally it may return an array (or other collection or data structure) of those images affected. // This can be used by imgReloadRestore() to restore them later, if that's an efficient way of doing it (otherwise, you don't need to return anything). // NOTE that the src argument here is just passed on from forceImgReload(), and MAY be a relative URI; // However, be aware that if you're reading the src property of an <img> DOM object, you'll always get back a fully-qualified URI, // even if the src attribute was a relative one in the original HTML. So watch out if trying to compare the two! // NOTE that if your page design makes it more efficient to obtain (say) an image id or list of ids (of identical images) *first*, and only then get the image src, // you can pass this id or list data to forceImgReload() along with (or instead of) a src argument: just add an extra or replacement parameter for this information to // this function, to imgReloadRestore(), to forceImgReload(), and to the anonymous function returned by forceImgReload() (and make it overwrite the earlier parameter variable from forceImgReload() if truthy), as appropriate. function imgReloadBlank(src) { // ##### Everything here is provisional on the way the pages are designed, and what images they contain; what follows is for example purposes only! // ##### For really simple pages containing just a single image that's always the one being refreshed, this function could be as simple as just the one line: // ##### document.getElementById("myImage").src = "/img/1x1blank.gif"; var blankList = [], fullSrc = /* Fully qualified (absolute) src - ie prepend protocol, server/domain, and path if not present in src */, imgs, img, i; for each (/* window accessible from this one, ie this window, and child frames/iframes, the parent window, anything opened via window.open(), and anything recursively reachable from there */) { // get list of matching images: imgs = theWindow.document.body.getElementsByTagName("img"); for (i = imgs.length; i--;) if ((img = imgs[i]).src===fullSrc) // could instead use body.querySelectorAll(), to check both tag name and src attribute, which would probably be more efficient, where supported { img.src = "/img/1x1blank.gif"; // blank them blankList.push(img); // optionally, save list of blanked images to make restoring easy later on } } for each (/* img DOM node held only by javascript, for example in any image-caching script */) if (img.src===fullSrc) { img.src = "/img/1x1blank.gif"; // do the same as for on-page images! blankList.push(img); } // ##### If necessary, do something here that tells all accessible windows not to create any *new* images with src===fullSrc, until further notice, // ##### (or perhaps to create them initially blank instead and add them to blankList). // ##### For example, you might have (say) a global object window.top.blankedSrces as a propery of your topmost window, initially set = {}. Then you could do: // ##### // ##### var bs = window.top.blankedSrces; // ##### if (bs.hasOwnProperty(src)) bs[src]++; else bs[src] = 1; // ##### // ##### And before creating a new image using javascript, you'd first ensure that (blankedSrces.hasOwnProperty(src)) was false... // ##### Note that incrementing a counter here rather than just setting a flag allows for the possibility that multiple forced-reloads of the same image are underway at once, or are overlapping. return blankList; // optional - only if using blankList for restoring back the blanked images! This just gets passed in to imgReloadRestore(), it isn't used otherwise. } // This function restores all blanked images, that were blanked out by imgReloadBlank(src) for the matching src argument. // ##### You should code the actual contents of this function according to your page design, and what images there are on them, as well as how/if images are dimensioned, etc!!! ##### function imgReloadRestore(src,blankList,imgDim,loadError); { // ##### Everything here is provisional on the way the pages are designed, and what images they contain; what follows is for example purposes only! // ##### For really simple pages containing just a single image that's always the one being refreshed, this function could be as simple as just the one line: // ##### document.getElementById("myImage").src = src; // ##### if in imgReloadBlank() you did something to tell all accessible windows not to create any *new* images with src===fullSrc until further notice, retract that setting now! // ##### For example, if you used the global object window.top.blankedSrces as described there, then you could do: // ##### // ##### var bs = window.top.blankedSrces; // ##### if (bs.hasOwnProperty(src)&&--bs[src]) return; else delete bs[src]; // return here means don't restore until ALL forced reloads complete. var i, img, width = imgDim&&imgDim[0], height = imgDim&&imgDim[1]; if (width) width += "px"; if (height) height += "px"; if (loadError) {/* If you want, do something about an image that couldn't load, eg: src = "/img/brokenImg.jpg"; or alert("Couldn't refresh image from server!"); */} // If you saved & returned blankList in imgReloadBlank(), you can just use this to restore: for (i = blankList.length; i--;) { (img = blankList[i]).src = src; if (width) img.style.width = width; if (height) img.style.height = height; } } // Force an image to be reloaded from the server, bypassing/refreshing the cache. // due to limitations of the browser API, this actually requires TWO load attempts - an initial load into a hidden iframe, and then a call to iframe.contentWindow.location.reload(true); // If image is from a different domain (ie cross-domain restrictions are in effect, you must set isCrossDomain = true, or the script will crash! // imgDim is a 2-element array containing the image x and y dimensions, or it may be omitted or null; it can be used to set a new image size at the same time the image is updated, if applicable. // if "twostage" is true, the first load will occur immediately, and the return value will be a function // that takes a boolean parameter (true to proceed with the 2nd load (including the blank-and-reload procedure), false to cancel) and an optional updated imgDim. // This allows you to do the first load early... for example during an upload (to the server) of the image you want to (then) refresh. function forceImgReload(src, isCrossDomain, imgDim, twostage) { var blankList, step = 0, // step: 0 - started initial load, 1 - wait before proceeding (twostage mode only), 2 - started forced reload, 3 - cancelled iframe = window.document.createElement("iframe"), // Hidden iframe, in which to perform the load+reload. loadCallback = function(e) // Callback function, called after iframe load+reload completes (or fails). { // Will be called TWICE unless twostage-mode process is cancelled. (Once after load, once after reload). if (!step) // initial load just completed. Note that it doesn't actually matter if this load succeeded or not! { if (twostage) step = 1; // wait for twostage-mode proceed or cancel; don't do anything else just yet else { step = 2; blankList = imgReloadBlank(src); iframe.contentWindow.location.reload(true); } // initiate forced-reload } else if (step===2) // forced re-load is done { imgReloadRestore(src,blankList,imgDim,(e||window.event).type==="error"); // last parameter checks whether loadCallback was called from the "load" or the "error" event. if (iframe.parentNode) iframe.parentNode.removeChild(iframe); } } iframe.style.display = "none"; window.parent.document.body.appendChild(iframe); // NOTE: if this is done AFTER setting src, Firefox MAY fail to fire the load event! iframe.addEventListener("load",loadCallback,false); iframe.addEventListener("error",loadCallback,false); iframe.src = (isCrossDomain ? "/echoimg.php?src="+encodeURIComponent(src) : src); // If src is cross-domain, script will crash unless we embed the image in a same-domain html page (using server-side script)!!! return (twostage ? function(proceed,dim) { if (!twostage) return; twostage = false; if (proceed) { imgDim = (dim||imgDim); // overwrite imgDim passed in to forceImgReload() - just in case you know the correct img dimensions now, but didn't when forceImgReload() was called. if (step===1) { step = 2; blankList = imgReloadBlank(src); iframe.contentWindow.location.reload(true); } } else { step = 3; if (iframe.contentWindow.stop) iframe.contentWindow.stop(); if (iframe.parentNode) iframe.parentNode.removeChild(iframe); } } : null); } 

उसके बाद, अपने पृष्ठ के समान डोमेन पर स्थित एक छवि को ताज़ा करने के लिए, आप बस ऐसा कर सकते हैं:

 forceImgReload("myimage.jpg"); 

किसी अन्य स्थान से एक छवि को रीफ़्रेश करने के लिए (क्रॉस-डोमेन):

 forceImgReload("http://img.hiwab.com/javascript/someimage.jpg", true); 

उपयोगकर्ता के लिए दृश्य पुनः लोड विलंब को कम करने के लिए, अपलोड करने के साथ-साथ पुनः लोड की प्रक्रिया के प्रारंभिक चरण को तैयार करने के लिए, अपने सर्वर पर एक नया संस्करण अपलोड करने के बाद एक और अधिक उन्नत एप्लिकेशन एक छवि पुनः लोड करने के लिए हो सकता है। यदि आप AJAX के माध्यम से अपलोड कर रहे हैं, और सर्वर एक बहुत ही सरल JSON सरणी [सफलता, चौड़ाई, ऊंचाई] वापस कर रहा है तो आपका कोड ऐसा कुछ दिखाई दे सकता है:

 // fileForm is a reference to the form that has a the <input typ="file"> on it, for uploading. // serverURL is the url at which the uploaded image will be accessible from, once uploaded. // The response from uploadImageToServer.php is a JSON array [success, width, height]. (A boolean and two ints). function uploadAndRefreshCache(fileForm, serverURL) { var xhr = new XMLHttpRequest(), proceedWithImageRefresh = forceImgReload(serverURL, false, null, true); xhr.addEventListener("load", function(){ var arr = JSON.parse(xhr.responseText); if (!(arr&&arr[0])) { proceedWithImageRefresh(false); doSomethingOnUploadFailure(...); } else { proceedWithImageRefresh(true,[arr[1],ar[2]]); doSomethingOnUploadSuccess(...); }}); xhr.addEventListener("error", function(){ proceedWithImageRefresh(false); doSomethingOnUploadError(...); }); xhr.addEventListener("abort", function(){ proceedWithImageRefresh(false); doSomethingOnUploadAborted(...); }); // add additional event listener(s) to track upload progress for graphical progress bar, etc... xhr.open("post","uploadImageToServer.php"); xhr.send(new FormData(fileForm)); } 

एक अंतिम नोट: यद्यपि यह विषय छवियों के बारे में है, यह संभवतः अन्य प्रकार की फाइलों या संसाधनों पर भी लागू होता है। उदाहरण के लिए, पुरानी स्क्रिप्ट या सीएसएस फाइलों के उपयोग को रोकने या अपडेट किए गए पीडीएफ दस्तावेज़ों को रीफ्रेश करना (इन-ब्राउज़र खोलने के लिए सेट अप करने पर केवल (4) का उपयोग करना) विधि (4) के ऊपर जावास्क्रिप्ट में कुछ बदलाव की आवश्यकता हो सकती है, इन मामलों में

एक उत्तर है कि कुछ मिलते-जुलते क्वेरी पैरामीटर को हैशली से जोड़ने का सुझाव दिया गया है।

एक बेहतर उत्तर है कि आपके HTTP शीर्ष लेख में कुछ अतिरिक्त विकल्प फेंकना है।

 Pragma: no-cache Expires: Fri, 30 Oct 1998 14:19:41 GMT Cache-Control: no-cache, must-revalidate 

अतीत में एक तारीख प्रदान करके, यह ब्राउज़र द्वारा कैश नहीं किया जाएगा। Cache-Control एचटीटीपी / 1.1 में जोड़ा गया था और अनिवार्य-प्रमाणित टैग इंगित करता है कि प्रॉक्सी को मौजूदा परिस्थितियों में भी पुरानी छवि की सेवा नहीं देनी चाहिए और Pragma: no-cache वर्तमान-आधुनिक ब्राउज़रों / कैश के लिए Pragma: no-cache वास्तव में आवश्यक नहीं है, लेकिन कुछ क्रूर बूढ़े पुराने कार्यान्वयन के साथ मदद करें

नई छवि बनाने के बाद, क्या आप DOM से पुरानी छवि को निकाल रहे हैं और इसे एक नए के साथ बदल सकते हैं?

आप हर अद्यतन छवियों को हर जगह ले जा सकते हैं, लेकिन उन्हें पेज पर नहीं जोड़ते हैं।

ऐसा करने के कई तरीके हैं ऐसा कुछ काम करेगा

 function updateImage() { var image = document.getElementById("theText"); if(image.complete) { var new_image = new Image(); //set up the new image new_image.id = "theText"; new_image.src = image.src; // insert new image and remove old image.parentNode.insertBefore(new_image,image); image.parentNode.removeChild(image); } setTimeout(updateImage, 1000); } 

काम करने के बाद, यदि अभी भी समस्याएं हैं तो संभवतया एक कैशिंग समस्या है जैसे अन्य जवाबों के बारे में बात करते हैं

मैं जो समाप्त कर रहा था, उस सर्वर पर उस छवि के उस स्रोत पर कोई अनुरोध करने के लिए सर्वर को मैप करने का अनुरोध करना था जो मैं अपडेट करने का प्रयास कर रहा था। तब मेरे टाइमर ने नाम के अंत में एक संख्या जोड़ दी थी, ताकि DOM उसे एक नई छवि के रूप में देख सके और उसे लोड करे।

उदाहरण के लिए

 http://img.hiwab.com/javascript/image.jpg //and http://img.hiwab.com/javascript/image01.jpg 

एक ही छवि पीढ़ी कोड का अनुरोध करेगा लेकिन यह ब्राउज़र के लिए अलग-अलग छवियों की तरह दिखाई देगा।

 var newImage = new Image(); newImage.src = "http://img.hiwab.com/javascript/image.jpg"; var count = 0; function updateImage() { if(newImage.complete) { document.getElementById("theText").src = newImage.src; newImage = new Image(); newImage.src = "http://localhost/image/id/image" + count++ + ".jpg"; } setTimeout(updateImage, 1000); } 
 function reloadImage(imageId) { path = '../showImage.php?cache='; //for example imageObject = document.getElementById(imageId); imageObject.src = path + (new Date()).getTime(); } 
 <img src='../showImage.php' id='myimage' /> <br/> <input type='button' onclick="reloadImage('myimage')" /> 

इसे एक अद्वितीय यूआरएल बनाने के लिए एक बेकार क्वेरीस्ट्रिंग का उपयोग करने का प्रयास करें:

 function updateImage() { if(newImage.complete) { document.getElementById("theText").src = newImage.src; newImage = new Image(); number++; newImage.src = "http://img.hiwab.com/javascript/image.jpg?" + new Date(); } setTimeout(updateImage, 1000); } 
 document.getElementById("img-id").src = document.getElementById("img-id").src 

अपने एसआरसी के रूप में अपनी एसआरसी सेट करें

मेरे पास एक आवश्यकता थी: 1) छवि को किसी भी ?var=xx को नहीं जोड़ सकते 2) यह क्रॉस-डोमेन काम करना चाहिए

मैं वास्तव में एक के साथ इस उत्तर में # 4 विकल्प पसंद है, लेकिन:

  • इसमें क्रॉसडोमेन के साथ मज़बूती से काम करने में समस्याएं हैं (और इसके लिए सर्वर कोड को छूने की आवश्यकता है)।

मेरा त्वरित और गंदा तरीका है:

  1. छिपी हुई आइफ्रेम बनाएं
  2. वर्तमान पृष्ठ को इसे लोड करें (हाँ पूरे पेज)
  3. iframe.contentWindow.location.reload(true);
  4. छवि स्रोत खुद को फिर से सेट करें

यह रहा

 function RefreshCachedImage() { if (window.self !== window.top) return; //prevent recursion var $img = $("#MYIMAGE"); var src = $img.attr("src"); var iframe = document.createElement("iframe"); iframe.style.display = "none"; window.parent.document.body.appendChild(iframe); iframe.src = window.location.href; setTimeout(function () { iframe.contentWindow.location.reload(true); setTimeout(function () { $img.removeAttr("src").attr("src", src); }, 2000); }, 2000); } 

हाँ, मुझे पता है, setTimeout … आपको इसे उचित ओलोड-इवेंट्स में बदलना होगा।

मैंने इस समस्या को एक सबलेट के माध्यम से डेटा वापस भेजकर हल किया

 response.setContentType("image/png"); response.setHeader("Pragma", "no-cache"); response.setHeader("Cache-Control", "no-cache, must-revalidate"); response.setDateHeader("Expires", 0); BufferedImage img = ImageIO.read(new File(imageFileName)); ImageIO.write(img, "png", response.getOutputStream()); 

फिर पृष्ठ से आप इसे सही छवि फ़ाइल को पकड़ने के लिए कुछ पैरामीटर के साथ सर्वलेट दे देते हैं

 <img src="YourServlet?imageFileName=imageNum1"> 

यहाँ मेरा समाधान है यह बहुत सरल है। फ़्रेम शेड्यूलिंग बेहतर हो सकता है।

 <!doctype html> <html> <head> <meta charset="utf-8"> <title>Image Refresh</title> </head> <body> <!-- Get the initial image. --> <img id="frame" src="frame.jpg"> <script> // Use an off-screen image to load the next frame. var img = new Image(); // When it is loaded... img.addEventListener("load", function() { // Set the on-screen image to the same source. This should be instant because // it is already loaded. document.getElementById("frame").src = img.src; // Schedule loading the next frame. setTimeout(function() { img.src = "frame.jpg?" + (new Date).getTime(); }, 1000/15); // 15 FPS (more or less) }) // Start the loading process. img.src = "frame.jpg?" + (new Date).getTime(); </script> </body> </html> 

Heavily based on Doin's #4 code, the below example simplifies that code a great bit utilising document.write instead of src in the iframe to support CORS. Also only focuses on busting the browser cache, not reloading every image on the page.

Below is written in typescript and uses the angular $q promise library, just fyi, but should be easy enough to port to vanilla javascript. Method is meant to live inside a typescript class.

Returns a promise that will be resolved when the iframe has completed reloading. Not heavily tested, but works well for us.

  mmForceImgReload(src: string): ng.IPromise<void> { var deferred = $q.defer<void>(); var iframe = window.document.createElement("iframe"); var firstLoad = true; var loadCallback = (e) => { if (firstLoad) { firstLoad = false; iframe.contentWindow.location.reload(true); } else { if (iframe.parentNode) iframe.parentNode.removeChild(iframe); deferred.resolve(); } } iframe.style.display = "none"; window.parent.document.body.appendChild(iframe); iframe.addEventListener("load", loadCallback, false); iframe.addEventListener("error", loadCallback, false); var doc = iframe.contentWindow.document; doc.open(); doc.write('<html><head><title></title></head><body><img src="' + src + '"></body></html>'); doc.close(); return deferred.promise; } 

I used the below concept of first binding the image with a false(buffer) url and next binding it with the valid url.

 imgcover.ImageUrl = ConfigurationManager.AppSettings["profileLargeImgPath"] + "Myapp_CoverPic_" + userid + "Buffer.jpg"; imgcover.ImageUrl = ConfigurationManager.AppSettings["profileLargeImgPath"] + "Myapp_CoverPic_" + userid + ".jpg"; 

This way, I am forcing the browser to refresh with valid url.

 <img src='someurl.com/someimage.ext' onload='imageRefresh(this, 1000);'> 

Then below in some javascript

 <script language='javascript'> function imageRefresh(img, timeout) { setTimeout(function() { var d = new Date; var http = img.src; if (http.indexOf("&d=") != -1) { http = http.split("&d=")[0]; } img.src = http + '&d=' + d.getTime(); }, timeout); } </script> 

And so what this does is, when the image loads, schedules it to be reloaded in 1 second. I'm using this on a page with home security cameras of varying type.