JQuery में एक तत्व (छवि) को पुनः लोड / ताज़ा कैसे करें

Question

क्या jQuery का उपयोग कर सर्वर से एक समान फ़ाइल नाम के साथ एक छवि को फिर से लोड करना संभव है?

उदाहरण के लिए, मेरे पास एक पृष्ठ पर एक छवि है, हालांकि, उपयोगकर्ता के कार्यों के आधार पर भौतिक छवि बदल सकती है। ध्यान दें, इसका मतलब फ़ाइल नाम में परिवर्तन नहीं है, बल्कि वास्तविक फ़ाइल ही है।

अर्थात:

• डिफ़ॉल्ट पृष्ठ पर उपयोगकर्ता के दृश्य छवि
• उपयोगकर्ता नई छवि अपलोड करता है
• पृष्ठ पर डिफ़ॉल्ट छवि नहीं बदलती (मेरा मानना ​​है कि फ़ाइल नाम समान होने के कारण, ब्राउज़र कैश्ड संस्करण का उपयोग करता है)

भले ही नीचे दिए गए कोड को कितनी बार कहा जाए, वही समस्या बनी रहती है।

$("#myimg").attr("src", "/myimg.jpg");

JQuery प्रलेखन में, "लोड" फ़ंक्शन सही होगा यदि इसमें किसी तत्व के सफल / पूर्ण लोड के लिए कॉलबैक फ़ंक्शन को बाइंड करने के विपरीत घटना को फायर करने का एक डिफ़ॉल्ट तरीका था।

किसी भी मदद का बहुत स्वागत है।

Comments

@ एलेक्सिस, क्या आपका मुद्दा यह है कि छवि ब्राउज़र में कैश की गई है और सर्वर पर इसे बदलने के बाद अपडेट नहीं होगी?

— जय

@Jerose, मेरा मानना ​​है कि यह मुद्दा है क्योंकि फ़ाइल वास्तव में (एक ही फ़ाइल नाम) बदल जाती है और पृष्ठ पर परिलक्षित होती है यदि आप एक पूर्ण पृष्ठ ताज़ा करते हैं।

— एलेक्सिस अब्रील

Answer 1

ऐसा लगता है कि यह आपके ब्राउज़र की छवि को कैशिंग कर रहा है (जो अब मैंने नोटिस किया है कि आपने अपने प्रश्न में लिखा है)। आप ब्राउज़र को एक अतिरिक्त चर पास करके छवि को फिर से लोड करने के लिए मजबूर कर सकते हैं:

d = new Date();
$("#myimg").attr("src", "/myimg.jpg?"+d.getTime());

Comments

एक क्वेरी स्ट्रिंग चर को जोड़ने से मेरा दिमाग पूरी तरह से गुजर गया। इससे यह हल हो गया और छवि अब अनुरोध पर पुनः लोड हो गई।

— एलेक्सिस अब्रिल

गैंगस्टा टिप, इसे प्यार करें

— डेव जेलिसन

यह काम करता है, और यह एक अच्छा वर्कअराउंड है, लेकिन फिर भी एक वर्कअराउंड है! क्या ब्राउज़र को कैश किए गए के बारे में भूलने के लिए छवि को लाने का कोई अलग तरीका नहीं है?

— स्पा

मेरे पास वास्तव में एक आकर्षक वेब कैमरा है जो स्थिर छवियों के लिए किसी भी अनुरोध को मना करता है जिसमें पैरामीटर होते हैं। ओह। यह एक महान समाधान है अन्यथा।

— खतरों

@TomasGonzalez बी / सी वहाँ है के साथ एक टक्कर होने का एक मौका randomहै, और कभी साथ नहीं होना चाहिए Dateजब तक आप कर रहे हैं वास्तव में बहुत जल्दी। ; ^) क्लाइंट पर डेट प्राप्त करना वह संसाधन गहन नहीं है, और आप एक बार में खींचने के लिए जितनी चाहें उतनी छवियों का पुन: उपयोग कर सकते हैं, इसलिए चरण 4 पर जाएं। लाभ।

— रफिन

Answer 2

यह शायद सबसे अच्छा तरीका नहीं है, लेकिन मैंने अतीत में इस समस्या को हल किया है केवल जावास्क्रिप्ट का उपयोग करके छवि URL पर टाइमस्टैम्प जोड़कर:

$("#myimg").attr("src", "/myimg.jpg?timestamp=" + new Date().getTime());

अगली बार जब यह लोड होता है, टाइमस्टैम्प वर्तमान समय पर सेट होता है और URL अलग होता है, इसलिए ब्राउज़र कैश्ड संस्करण का उपयोग करने के बजाय छवि के लिए एक GET करता है।

Comments

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

— felwithe

@felwithe, क्या यह सर्वर केवल क्वेरी के अंत में एक्सटेंशन के लिए लग सकता है? तो आप इस दृष्टिकोण का परीक्षण करने की कोशिश कर सकते हैं: imagename.jpg?t=1234567&q=.jpgयाimagename.jpg#t1234567.jpg

— फ्लेमस्टॉर्म

Answer 3

यह उन दो समस्याओं में से एक हो सकती है जिनका आप स्वयं उल्लेख करते हैं।

1. सर्वर छवि को कैशिंग कर रहा है
2. JQuery आग नहीं देता है या कम से कम विशेषता को अपडेट नहीं करता है

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

$("#myimg").removeAttr("src").attr("src", "/myimg.jpg");

यहां तक ​​कि अगर यह काम करता है, तो कुछ कोड पोस्ट करें क्योंकि यह इष्टतम नहीं है, imo :-)

Comments

@ कोर्डनमे, क्या यह वह जगह है जहां कोई "खराब" jQuery के बारे में टिप्पणी करता है? (मैं मजाक कर रहा हूं, मजाक कर रहा हूं);)

— jay

@ कोर्डोंमे, यह वास्तव में एक इवेंट हैंडलर में आयोजित किया गया है और इस समय कोड की एक ही लाइन है। मैंने इस लाइन के ठीक पहले एक अलर्ट जोड़ा है कि घटना को सत्यापित करने के लिए वास्तव में फायरिंग हो रही है। इस घटना में कोई त्रुटि नहीं है।

— एलेक्सिस अब्रील

मेरे पास वास्तव में एक आकर्षक वेब कैमरा है, जो स्थिर छवियों के लिए किसी भी अनुरोध को मना करता है जिसमें पैरामीटर होते हैं। ओह। यह मेरे अनूठे मामले के लिए एक महान समाधान है। धन्यवाद।

— खतरों

यदि आप अवशिष्ट मापदंडों की आवश्यकता नहीं चाहते हैं तो यह सबसे अच्छा जवाब है

— राफाशीष

धन्यवाद इससे मदद मिली (इसे केवल क्रोम में मेरे लिए कैश किया गया)

— डैनियल रेसच

Answer 4

जावास्क्रिप्ट में छवि को हार्डकॉकेट करने के बारे में कोई चिंता नहीं के साथ एक पंक्ति के साथ (विचारों के लिए धन्यवाद करने के लिए धन्यवाद:

$("#myimg").attr("src", $("#myimg").attr("src")+"?timestamp=" + new Date().getTime());

Comments

बस सावधान रहें क्योंकि यह असीम रूप से URL के अंत में अधिक से अधिक वर्ण जोड़ देगा

— Alfo

Answer 5

बाईपास कैशिंग करने के लिए और छवि url करने के लिए अनंत टाइम स्टांप जोड़ने से बचने के लिए, एक नया जोड़ने से पहले पिछले टाइमस्टैम्प निकाल देते हैं, यह कैसे मैं इसे किया है है।

//refresh the image every 60seconds
var xyro_refresh_timer = setInterval(xyro_refresh_function, 60000);

function xyro_refresh_function(){
//refreshes an image with a .xyro_refresh class regardless of caching
    //get the src attribute
    source = jQuery(".xyro_refresh").attr("src");
    //remove previously added timestamps
    source = source.split("?", 1);//turns "image.jpg?timestamp=1234" into "image.jpg" avoiding infinitely adding new timestamps
    //prep new src attribute by adding a timestamp
    new_source = source + "?timestamp="  + new Date().getTime();
    //alert(new_source); //you may want to alert that during developement to see if you're getting what you wanted
    //set the new src attribute
    jQuery(".xyro_refresh").attr("src", new_source);
}

Answer 6

यह महान काम करता है! हालाँकि यदि आप कई बार src को पुनः लोड करते हैं, तो टाइमस्टैम्प को url में भी मिल जाता है। मैंने उससे निपटने के लिए स्वीकृत उत्तर को संशोधित किया है।

$('#image_reload_button').on('click', function () {
    var img = $('#your_image_selector');
    var src = img.attr('src');
    var i = src.indexOf('?dummy=');
    src = i != -1 ? src.substring(0, i) : src;

    var d = new Date();
    img.attr('src', src + '?dummy=' + d.getTime());
});

Answer 7

क्या आपने छवि कंटेनर html को रीसेट करने का प्रयास किया है। बेशक अगर यह ब्राउज़र है जो कैशिंग है तो यह मदद नहीं करेगा।

function imageUploadComplete () {
    $("#image_container").html("<img src='" + newImageUrl + "'>");
}

Answer 8

कुछ समय वास्तव में समाधान जैसे -

$("#Image").attr("src", $('#srcVal').val()+"&"+Math.floor(Math.random()*1000));

यह भी ठीक से src ताज़ा नहीं है, यह कोशिश करो, यह मेरे लिए काम किया ->

$("#Image").attr("src", "dummy.jpg");
$("#Image").attr("src", $('#srcVal').val()+"&"+Math.floor(Math.random()*1000));

Answer 9

परिसीमन के रूप में "#" का उपयोग करना उपयोगी हो सकता है

मेरी छवियों को "www" से ऊपर एक "छिपे हुए" फ़ोल्डर में रखा गया है, ताकि केवल लॉग किए गए उपयोगकर्ताओं को उन तक पहुंच की अनुमति दी जाए। इस कारण मैं साधारण का उपयोग नहीं कर सकता, <img src=/somefolder/1023.jpg>लेकिन मैं सर्वर को अनुरोध भेजता हूं<img src=?1023> और यह '1023' नाम से रखी गई छवि को वापस भेजकर प्रतिक्रिया करता है।

एप्लिकेशन का उपयोग छवि क्रॉपिंग के लिए किया जाता है, इसलिए छवि को क्रॉप करने के लिए एजाक्स अनुरोध के बाद, इसे सर्वर पर सामग्री के रूप में बदल दिया जाता है, लेकिन इसका मूल नाम रहता है। क्रॉपिंग के परिणाम को देखने के लिए, अजाक्स अनुरोध पूरा होने के बाद, पहली छवि को डोम से हटा दिया जाता है और उसी नाम से एक नई छवि डाली जाती है<img src=?1023> ।

कैश करने से बचने के लिए मैं "#" के साथ "समय" टैग को जोड़ने का अनुरोध करता हूं ताकि यह ऐसा हो जाए <img src=?1023#1467294764124>। सर्वर स्वचालित रूप से अनुरोध के हैश भाग को फ़िल्टर करता है और '1023' के रूप में रखी गई मेरी छवि को वापस भेजकर सही ढंग से प्रतिक्रिया करता है। इस प्रकार मुझे हमेशा बहुत सर्वर-साइड डिकोडिंग के बिना छवि का अंतिम संस्करण मिलता है।

Comments

एक छवि की सेवा करने के लिए उस परेशानी से क्यों गुज़रें? एक व्यर्थ परेशानी की तरह लगता है

— lucasreta

Answer 10

मुझे कई बार छवि स्रोत को पुनः लोड करना पड़ सकता है। मुझे लोडश के साथ एक समाधान मिला जो मेरे लिए अच्छा काम करता है:

$("#myimg").attr('src', _.split($("#myimg").attr('src'), '?', 1)[0] + '?t=' + _.now());

एक मौजूदा टाइमस्टैम्प को छोटा कर दिया जाएगा और एक नए के साथ बदल दिया जाएगा।

Answer 11

@Kasper Taeymans के जवाब पर आधारित।

अगर आपको बस पुनः लोड छवि की आवश्यकता है (यह नए के साथ src की जगह नहीं है), कोशिश करें:

$(function() {
  var img = $('#img');

  var refreshImg = function(img) {
    // the core of answer is 2 lines below
    var dummy = '?dummy=';
    img.attr('src', img.attr('src').split(dummy)[0] + dummy + (new Date()).getTime());

    // remove call on production
    updateImgVisualizer();
  };


  // for display current img url in input
  // for sandbox only!
  var updateImgVisualizer = function() {
    $('#img-url').val(img.attr('src'));
  };

  // bind img reload on btn click
  $('.img-reloader').click(function() {
    refreshImg(img);
  });

  // remove call on production
  updateImgVisualizer();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<img id="img" src="http://dummyimage.com/628x150/">


<p>
  <label>
    Current url of img:
    <input id="img-url" type="text" readonly style="width:500px">
  </label>
</p>

<p>
  <button class="img-reloader">Refresh</button>
</p>

Answer 12

मैं इसे html में बस करता हूँ:

<script>
    $(document).load(function () {
        d = new Date();
        $('#<%= imgpreview.ClientID %>').attr('src','');
    });
</script>

और इस तरह के पीछे कोड में छवि पुनः लोड करें:

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        image.Src = "/image.jpg"; //url caming from database
    }

}

Comments

पृष्ठ को पुन: लोड करना और asp.NET WebForms में सेटिंग वास्तव में यहाँ विषय पर नहीं है।

— जोनास ने