छवियों को कैश करने के लिए वेब ब्राउज़र को मजबूर करने के लिए कैसे नहीं

Question

पृष्ठभूमि

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

समस्या

समस्या तब होती है जब व्यवस्थापक चित्र को बदलना चाहता है। उसे बस "ब्राउज" बटन को हिट करना होगा, एक नई तस्वीर चुननी होगी और ओके दबाना होगा। और यह ठीक काम करता है।

एक बार छवि अपलोड होने के बाद, मेरा बैक-एंड CGI अपलोड को हैंडल करता है और फॉर्म को ठीक से लोड करता है।

समस्या यह है कि दिखाई गई छवि ताज़ा नहीं होती है । पुरानी छवि अभी भी दिखाई गई है, भले ही डेटाबेस सही छवि रखता है। मैंने इसे इस तथ्य तक सीमित कर दिया है कि वेब ब्राउज़र में IMAGE IS CACHED है। यदि व्यवस्थापक फ़ायरफ़ॉक्स / एक्सप्लोरर / सफारी में RELOAD बटन दबाता है, तो सब कुछ ठीक हो जाता है और नई छवि बस दिखाई देती है।

मेरा समाधान - काम नहीं कर रहा

मैं अतीत में बहुत दूर की तारीख के साथ एक HTTP एक्सपायर इंस्ट्रक्शन लिखकर कैश को नियंत्रित करने की कोशिश कर रहा हूं।

Expires: Mon, 15 Sep 2003 1:00:00 GMT

याद रखें कि मैं प्रशासनिक पक्ष में हूं और मुझे वास्तव में परवाह नहीं है यदि पृष्ठ लोड होने में थोड़ा अधिक समय लेते हैं क्योंकि वे हमेशा समाप्त हो जाते हैं।

लेकिन, यह भी काम नहीं करता है।

टिप्पणियाँ

छवि अपलोड करते समय, डेटाबेस में इसका फ़ाइल नाम नहीं रखा जाता है। इसका नाम बदलकर Image.jpg रखा गया है ( इसका उपयोग करते समय केवल चीजों को बाहर निकालने के लिए)। मौजूदा छवि को नए के साथ बदलने पर, नाम या तो नहीं बदलता है। बस छवि फ़ाइल की सामग्री बदल जाती है।

वेबसर्वर होस्टिंग सेवा / आईएसपी द्वारा प्रदान किया जाता है। यह अपाचे का उपयोग करता है।

सवाल

क्या वेब ब्राउज़र को इस पृष्ठ से चीजों को कैश नहीं करने के लिए मजबूर करने का एक तरीका है, यहां तक ​​कि छवियां भी नहीं?

मैं डेटाबेस के साथ वास्तव में "फ़ाइल नाम को बचाने" के विकल्प के साथ मजाक कर रहा हूं। इस तरह, यदि छवि को बदल दिया जाता है, तो IMG टैग का src भी बदल जाएगा। हालाँकि, इसके लिए संपूर्ण साइट में बहुत सारे बदलावों की आवश्यकता होती है और यदि मेरे पास बेहतर समाधान है तो मैं इसे नहीं करता। इसके अलावा, यह तब भी काम नहीं करेगा जब अपलोड की गई नई छवि का नाम एक ही हो (मान लीजिए कि फ़ोटो को थोड़ा सा फ़ोटोशॉप किया गया है और पुनः अपलोड किया गया है)।

Comments

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

— फिलीबर्ट पेरुसे

Answer 1

Armin Ronacher का सही विचार है। समस्या यादृच्छिक तार टकरा सकती है। मै इस्तेमाल करूंगा:

<img src="picture.jpg?1222259157.415" alt="">

जहां "1222259157.415" सर्वर पर वर्तमान समय है।
जावास्क्रिप्ट के साथ performance.now()या अजगर के साथ द्वारा समय उत्पन्न करेंtime.time()

Comments

एक महत्वपूर्ण जोड़ यह है कि आप कभी भी ब्राउज़र को कुछ भी करने के लिए मजबूर नहीं कर सकते । आप बस इतना कर सकते हैं कि मैत्रीपूर्ण सुझाव दें। यह वास्तव में उन सुझावों का पालन करने के लिए ब्राउज़र और उपयोगकर्ता पर निर्भर है। एक ब्राउज़र इसे अनदेखा करने के लिए स्वतंत्र है, या कोई उपयोगकर्ता डिफ़ॉल्ट को ओवरराइड कर सकता है।

— जोएल कोएहॉर्न

जोएल, आप अपने जवाब में इसे जोड़ना बेहतर होगा।

— epochwolf

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

— danjah

सर्वर समय को जोड़ने के बजाय, जो कैशिंग को पूरी तरह से रोक देगा, क्यों '?' के बाद फ़ाइल के अंतिम-संशोधित समय को नहीं जोड़ें। इस तरह, छवि को सामान्य रूप से कैश किया जाएगा, जब तक कि यह अगले परिवर्तन न हो जाए।

— चल रहा

डॉइन द्वारा अंतिम टिप्पणी को उकेरना होगा! स्मार्ट कैशिंग वास्तव में महत्वपूर्ण है, क्यों किसी को एक ही फाइल को डाउनलोड करना होगा?

— f.arcarese

Answer 2

सरल फिक्स: छवि के लिए एक यादृच्छिक क्वेरी स्ट्रिंग संलग्न करें:

<img src="foo.cgi?random=323527528432525.24234" alt="">

HTTP RFC क्या कहता है:

Cache-Control: no-cache

लेकिन यह अच्छी तरह से काम नहीं करता है :)

Comments

कैश-कंट्रोल कैसे दें: नो-कैश सामान्य HTML में <img> टैग?

— पी सतीश पात्रो

यह प्रतिक्रिया हैडर में आने की जरूरत है?

— पी सतीश पात्रो

Answer 3

मैं उदाहरण के लिए PHP की फ़ाइल संशोधित समय फ़ंक्शन का उपयोग करता हूं :

echo <img  src='Images/image.png?" . filemtime('Images/image.png') . "'  />";

यदि आप छवि को बदलते हैं तो एक अलग संशोधित टाइमस्टैम्प होने के कारण कैश्ड के बजाय नई छवि का उपयोग किया जाता है।

Comments

महान टिप। यदि आपके संशोधित समय में परिवर्तन (अधिलेखित या परिवर्तित) हो, तो आपके पास कैशिंग और छवि दोनों को फिर से क्लाइंट के पास भेज दिया जाएगा।

— वासिलिस लूर्डास

अन्य विकल्प के लिए यहां देखें stackoverflow.com/questions/56588850/…

— drooh

निरपेक्ष ने इसे नचाया। महान टिप मेट।

— खुर्रम शेख

उत्तम ! बस एक अतिरिक्त टिप: <img src = "images / image.png? <? Php इको फिल्मटाइम ('images / image.jpg')?>">

— Rica Gurgel

Answer 4

मै इस्तेमाल करूंगा:

<img src="picture.jpg?20130910043254">

जहाँ "20130910043254" फ़ाइल का संशोधन समय है।

छवि अपलोड करते समय, डेटाबेस में इसका फ़ाइल नाम नहीं रखा जाता है। इसका नाम बदलकर Image.jpg रखा गया है (इसका उपयोग करते समय केवल चीजों को देखने के लिए)। मौजूदा छवि को नए के साथ बदलने पर, नाम या तो नहीं बदलता है। बस छवि फ़ाइल की सामग्री बदल जाती है।

मुझे लगता है कि दो प्रकार के सरल उपाय हैं: 1) जो पहले दिमाग में आते हैं (सीधे समाधान, क्योंकि वे आसानी से आते हैं), 2) वे जो आप चीजों को सोचने के बाद खत्म हो जाते हैं (क्योंकि वे आसान हैं उपयोग)। जाहिर है, आप हमेशा लाभ नहीं होगा यदि आप चीजों पर सोचने के लिए चुना है। लेकिन दूसरे विकल्पों को कम करके आंका गया है, मेरा मानना ​​है। जरा सोचो क्यों phpइतना लोकप्रिय है;)

Comments

+1 मुझे लगता है कि यह अन्य उत्तरों की तुलना में बहुत बेहतर विचार है क्योंकि लास संशोधन समय का उपयोग करते हुए, आपका सर्वर एक ही ब्राउज़र में एक ही छवि को कई बार देने की कोशिश नहीं करेगा जब छवि में कुछ भी नहीं बदला है। प्रत्येक बार छवि के अंतिम लिखने के समय को निकालने के लिए थोड़ा ओवरहेड होता है, लेकिन एक बड़ी छवि के लिए, यह हर बार छवि को वापस करने से बेहतर होता है और जब छवि बदल जाती है, तो उपयोगकर्ता के पास नया होगा। इस अच्छे छोटे जोड़ के लिए धन्यवाद।

— शमूएल

खैर, एक डेटाबेस में छवि के लिए पथ के साथ संशोधन समय स्टोर कर सकते हैं। इसलिए ओवरहेड भी कम महत्वपूर्ण हो सकता है। दूसरी ओर अगर ये ऐसी छवियां हैं जो स्रोत कोड का हिस्सा हैं, जिनके बारे में हम बात कर रहे हैं, तो कोई उनके संशोधन समय को भी कैश कर सकता है। छवियों के संशोधन समय (जैसे images.php) के साथ एक स्क्रिप्ट उत्पन्न करके । इस स्क्रिप्ट को प्रत्येक कमिट को पुनर्जीवित किया जाना चाहिए और फाइलों के संशोधन समय के निर्धारण के ओवरहेड को समाप्त करना चाहिए।

— x-yuri

@ एक्स yori इस कारण है कि मैं नहीं बल्कि filemtime चलाने की तुलना में डेटाबेस में इस अद्यतन क्षेत्र स्टोर करने के लिए चयन कर रहा है stackoverflow.com/questions/56588850/...

— drooh

Answer 5

कक्षा का उपयोग करें = "NO-CACHE"

नमूना HTML:

<div>
    <img class="NO-CACHE" src="images/img1.jpg" />
    <img class="NO-CACHE" src="images/imgLogo.jpg" />
</div>

jQuery:

    $(document).ready(function ()
    {           
        $('.NO-CACHE').attr('src',function () { return $(this).attr('src') + "?a=" + Math.random() });
    });

जावास्क्रिप्ट:

var nods = document.getElementsByClassName('NO-CACHE');
for (var i = 0; i < nods.length; i++)
{
    nods[i].attributes['src'].value += "?a=" + Math.random();
}

परिणाम: src = "images / img1.jpg" => src = "images / img1.jpg? A = 0.08749723793963926"

Comments

सरल, सुरुचिपूर्ण, और सर्वर साइड रेंडरिंग की आवश्यकता नहीं है। अच्छा!

— अहि टूना

Answer 6

आप छवियों की सेवा के लिए एक प्रॉक्सी स्क्रिप्ट लिख सकते हैं - हालांकि यह थोड़ा अधिक काम है। कुछ इस तरह से:

HTML:

<img src="image.php?img=imageFile.jpg&some-random-number-262376" />

स्क्रिप्ट:

// PHP
if( isset( $_GET['img'] ) && is_file( IMG_PATH . $_GET['img'] ) ) {

  // read contents
  $f = open( IMG_PATH . $_GET['img'] );
  $img = $f.read();
  $f.close();

  // no-cache headers - complete set
  // these copied from [php.net/header][1], tested myself - works
  header("Expires: Sat, 26 Jul 1997 05:00:00 GMT"); // Some time in the past
  header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT"); 
  header("Cache-Control: no-store, no-cache, must-revalidate"); 
  header("Cache-Control: post-check=0, pre-check=0", false); 
  header("Pragma: no-cache"); 

  // image related headers
  header('Accept-Ranges: bytes');
  header('Content-Length: '.strlen( $img )); // How many bytes we're going to send
  header('Content-Type: image/jpeg'); // or image/png etc

  // actual image
  echo $img;
  exit();
}

वास्तव में या तो कैश हेडर या छवि src पर यादृच्छिक संख्या पर्याप्त नहीं होनी चाहिए, लेकिन जब से हम बुलेट प्रूफ बनना चाहते हैं ..

Comments

तुम्हारा एक अच्छा समाधान है, सिवाय इसके कि प्रज्ञा प्रतिक्रिया शीर्ष लेख नहीं है।

— पिस्कोर ने

@Piskvor: w3.org/Protocols/rfc2616/rfc2616-sec14.html#sec14.32 अन्यथा लगता है।

— ग्रिजली

Answer 7

मैं एक नया कोडर हूँ, लेकिन यहाँ मैं क्या कर रहा हूँ, कैशिंग से ब्राउज़र को रोकने के लिए और अपने वेबकैम दृश्य पर रखने के लिए:

<meta Http-Equiv="Cache" content="no-cache">
<meta Http-Equiv="Pragma-Control" content="no-cache">
<meta Http-Equiv="Cache-directive" Content="no-cache">
<meta Http-Equiv="Pragma-directive" Content="no-cache">
<meta Http-Equiv="Cache-Control" Content="no-cache">
<meta Http-Equiv="Pragma" Content="no-cache">
<meta Http-Equiv="Expires" Content="0">
<meta Http-Equiv="Pragma-directive: no-cache">
<meta Http-Equiv="Cache-directive: no-cache">

निश्चित नहीं है कि ब्राउज़र क्या काम करता है, लेकिन यह कुछ के लिए काम करता है: IE: काम करता है जब वेबपेज रीफ्रेश होता है और जब वेबसाइट रीविजिट होती है (बिना रिफ्रेश किए)। CHROME: वेबपेज रीफ्रेश होने के बाद भी तभी काम करता है। SAFARI और iPad: काम नहीं करता है, मुझे इतिहास और वेब डेटा को साफ़ करना होगा।

SAFARI / iPad पर कोई विचार?

Answer 8

छवि अपलोड करते समय, डेटाबेस में इसका फ़ाइल नाम नहीं रखा जाता है। इसका नाम बदलकर Image.jpg रखा गया है (इसका उपयोग करते समय केवल चीजों को बाहर निकालने के लिए)।

इसे बदलें, और आपने अपनी समस्या ठीक कर ली है। मैं टाइमस्टैम्प का उपयोग करता हूं, जैसा कि ऊपर प्रस्तावित समाधानों के साथ है: छवि- <टाइमस्टैम्प> .jpg

संभवतः, छवि के लिए एक ही फ़ाइल नाम रखने से आप जो भी समस्याएं हैं, उन्हें दूर किया जा सकता है, लेकिन आप यह नहीं कहते कि वे क्या हैं।

Answer 9

मैंने वेब के चारों ओर सभी उत्तरों की जाँच की और सबसे अच्छा लग रहा था: (वास्तव में यह नहीं है)

<img src="image.png?cache=none">

सर्वप्रथम।

हालाँकि, यदि आप कैश जोड़ें = कोई नहीं पैरामीटर (जो स्थिर "कोई भी" शब्द नहीं है), तो यह कुछ भी प्रभावित नहीं करता है, ब्राउज़र अभी भी कैश से लोड होता है।

इस समस्या का समाधान था:

<img src="image.png?nocache=<?php echo time(); ?>">

जहां आप मूल रूप से यूनिक्स टाइमस्टैम्प को पैरामीटर को गतिशील बनाने के लिए जोड़ते हैं और कैश नहीं करते हैं, यह काम करता है।

हालाँकि, मेरी समस्या थोड़ी अलग थी: मैं फ्लाई जनरेट php चार्ट छवि पर लोड कर रहा था, और $ _GET मापदंडों के साथ पृष्ठ को नियंत्रित कर रहा था। मैं चाहता था कि छवि को कैश से पढ़ा जाए जब URL GET पैरामीटर समान रहता है, और GET पैरामीटर बदलने पर कैश नहीं करता है।

इस समस्या को हल करने के लिए, मुझे $ _GET की आवश्यकता है, लेकिन चूंकि यह यहाँ है, इसका समाधान है:

$chart_hash = md5(implode('-', $_GET));
echo "<img src='/images/mychart.png?hash=$chart_hash'>";

संपादित करें :

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

echo "<img src='/images/mychart.png?hash=" . filemtime('mychart.png') . "'>";

filemtime () फ़ाइल संशोधन समय मिलता है।

Comments

filemtimeसमाधान बेहतर इसलिए भी कि है md5में संसाधन क्षमता का एक बहुत लेता है।

— ओरीदम

कैशिंग छवियों को रोकने के लिए क्रोमियम आधारित ऐप प्राप्त करने की कोशिश कर रहे दिन बिताए। समय गूँज के साथ? Nocache मुद्दे को हल किया। धन्यवाद!

— वुडी

Answer 10

आपकी समस्या यह है कि Expires:हेडर के बावजूद , आपका ब्राउज़र अपने कैश को चेक करने के बजाय, अपडेट किए जाने से पहले उसकी इन-मेमोरी कॉपी का उपयोग कर रहा है।

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

मैंने यहाँ अपने उत्तर में ऐसा करने के लिए कुछ कोड पोस्ट किए ।

Answer 11

एक समय टिकट जोड़ें <img src="picture.jpg?t=<?php echo time();?>">

हमेशा आपकी फ़ाइल को अंत में एक यादृच्छिक संख्या देगा और इसे कैशिंग करना बंद कर देगा

Comments

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

— दिमित्री

Answer 12

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

यदि वह टाइमस्टैम्प छवि के अंतिम अपडेट समय से मेल खाती है, तो आपको जरूरत पड़ने पर कैश कर सकते हैं और नई छवि को सही समय पर सेवा दे सकते हैं।

Answer 13

मुझे लगता है कि मूल प्रश्न कुछ पाठ जानकारी के साथ संग्रहीत छवियों का संबंध है। इसलिए, यदि आपके पास src = ... url जनरेट करते समय टेक्स्ट संदर्भ तक पहुँच है, तो अर्थहीन रैंडम या टाइम स्टैम्प के बजाय इमेज बाइट्स के CRC32 का उपयोग करें। फिर, यदि बहुत सारी छवियों वाला पृष्ठ प्रदर्शित हो रहा है, तो केवल अद्यतन की गई छवियाँ पुनः लोड की जाएंगी। आखिरकार, अगर CRC भंडारण असंभव है, तो इसे क्रम में url पर गणना और जोड़ा जा सकता है।

Comments

या, सीआरसी के बजाय छवि के अंतिम-संशोधित समय का उपयोग करें, और भी बेहतर!

— चल रहा

Answer 14

मेरे दृष्टिकोण से, छवियों को अक्षम करना कैशिंग एक बुरा विचार है। बिल्कुल भी।

यहां मूल समस्या यह है - ब्राउज़र को छवि को अपडेट करने के लिए कैसे बाध्य किया जाए, जब इसे सर्वर साइड पर अपडेट किया गया हो।

फिर, मेरे व्यक्तिगत दृष्टिकोण से, छवियों तक सीधी पहुंच को अक्षम करने का सबसे अच्छा समाधान है। इसके बजाय सर्वर-साइड फिल्टर / सर्वलेट / अन्य समान उपकरण / सेवाओं के माध्यम से छवियों तक पहुंचें।

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

एकमात्र अपवाद - फेविकॉन हैं। कुछ कारणों से, यह काम नहीं करता है। मैं सर्वर से इसकी कैश को अपडेट करने के लिए ब्राउज़र को मजबूर नहीं कर सकता था। ETags, कैश कंट्रोल, एक्सपायर, प्रागमा हेडर, कुछ भी मदद नहीं की।

इस मामले में, कुछ यादृच्छिक / संस्करण पैरामीटर को यूआरएल में जोड़ना, ऐसा लगता है, एकमात्र समाधान है।

Answer 15

आदर्श रूप से, आपको सामग्री को सिंक्रनाइज़ करने के विकल्प के साथ प्रत्येक वेबपेज पर एक बटन / कीबाइंडिंग / मेनू जोड़ना चाहिए।

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

एक भोला उदाहरण इस तरह दिखता है:

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

परिणाम यह है कि आप अपने सभी उपयोगकर्ताओं को हर समय संसाधन अनुरोधों के साथ बमबारी करने से बचा सकते हैं, लेकिन साथ ही, उपयोगकर्ताओं को अपने संसाधनों को अपडेट करने के लिए एक तंत्र की अनुमति दें यदि उन्हें संदेह है कि वे सिंक से बाहर हैं।

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="mobile-web-app-capable" content="yes" />        
    <title>Resource Synchronization Test</title>
    <script>
function sync() {
    var xhr = new XMLHttpRequest;
    xhr.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {            
            var images = document.getElementsByClassName("depends-on-resource");

            for (var i = 0; i < images.length; ++i) {
                var image = images[i];
                if (image.getAttribute('data-resource-name') == 'resource.bmp') {
                    image.src = 'resource.bmp?i=' + new Date().getTime();                
                }
            }
        }
    }
    xhr.open('GET', 'resource.bmp', true);
    xhr.send();
}
    </script>
  </head>
  <body>
    <img class="depends-on-resource" data-resource-name="resource.bmp" src="resource.bmp"></img>
    <button onclick="sync()">sync</button>
  </body>
</html>

Answer 16

मैंने एक PHP स्क्रिप्ट बनाई जो HTML पेज में सभी छवियों के लिए स्वचालित रूप से टाइमस्टैम्प जोड़ देती है। आपको इस स्क्रिप्ट को अपने पृष्ठों में शामिल करने की आवश्यकता है। का आनंद लें!

http://alv90.altervista.org/how-to-force-the-browser-not-to-cache-images/

Answer 17

आपको एक अद्वितीय फ़ाइल नाम का उपयोग करना चाहिए। ऐशे ही

<img src="cars.png?1287361287" alt="">

लेकिन इस तकनीक का मतलब उच्च सर्वर उपयोग और बैंडविड्थ अपव्यय है। इसके बजाय, आपको संस्करण संख्या या दिनांक का उपयोग करना चाहिए। उदाहरण:

<img src="cars.png?2020-02-18" alt="">

लेकिन आप चाहते हैं कि यह कभी भी कैश से छवि की सेवा न करें। इसके लिए, यदि पेज पेज कैश का उपयोग नहीं करता है , तो यह PHP या सर्वर साइड के साथ संभव है।

<img src="cars.png?<?php echo time();?>" alt="">

हालांकि, यह अभी भी प्रभावी नहीं है। कारण: ब्राउज़र कैश ... अंतिम लेकिन सबसे प्रभावी तरीका Native JAVASCRIPT है। यह सरल कोड "NO-CACHE" वर्ग के साथ सभी छवियों को ढूंढता है और छवियों को लगभग अद्वितीय बनाता है। इसे स्क्रिप्ट टैग के बीच रखें।

var items = document.querySelectorAll("img.NO-CACHE");
for (var i = items.length; i--;) {
    var img = items[i];
    img.src = img.src + '?' + Date.now();
}

उपयोग

<img class="NO-CACHE" src="https://upload.wikimedia.org/wikipedia/commons/6/6a/JavaScript-logo.png" alt="">

परिणाम (ओं) को यह पसंद है

https://example.com/image.png?1582018163634