छवि लोड विफलता का पता लगाने के लिए और विफल होने पर, सफलता तक पुनः लोड करने का प्रयास करें?

Question

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

क्या छवियों को लोड करने में असफल होने का पता लगाने का कोई तरीका है और फिर यदि ऐसा है, तो img src पर लोड होने तक पुनः लोड करें? यदि हां, तो क्या आप एक उदाहरण प्रदान कर सकते हैं?

Answer 1

यहां कुछ ऐसा जो मैंने संकलित किया है, जो मदद कर सकता है। मैं इसका परीक्षण करने में कामयाब नहीं हो सका अगर आपको कोई समस्या है तो कृपया मुझे बताएं।

$(function() { 
    var $images = $('img.imageClassUpdateAtInterval:not([src="/assets/spinner.gif"])'); 

    // Now, no such image with 
    // a spinner 
    if($images.length === 0 && window.imageLocator) 
    clearInterval(window.imageLocator); 


    window.imageLocator = setInterval(function() { 
     $images.each(function() { 
      $this = $(this); 
      if (!$this.data('src')) { 
       $this.data('src', $this.prop('src')); 
      } 

      $this.prop('src', $this.data('src') + '?timestamp=' + new Date().getTime()); 
      console.log($this.prop('src')); 
     }); 
    }, 60 * 1000); 

    // suppose, an error occured during 
    // locating the src (source) of the 
    // image - image not found, network 
    // unable to locate the resource etc. 
    // it will fall in each time on error 
    // occurred 
    $('img.imageClassUpdateAtInterval').error(
      function() { 
       // set a broken image 
       $(this).unbind("error").attr("src", "/assets/broken.gif"); 
       // setting this up in relative 
       // position 
       $(this).css("position", "relative"); 
       $(this).apppend("<span>Error occured</span>"); 
       $(this).find("span").css({"position": "absolute", "background-color": "#252525", "padding": ".3em", "bottom": "0"}); 
    }); 

}); 

ऊपर समाधान दो अलग @user113716 द्वारा शुरू समाधान और @travis

Answer 2

<img onerror="dosomthing()" ...> 

Answer 3

से संकलित किया गया है इस कोड पर एक नज़र डालें:

$('img.autoFix').error(function(){ 
    var src = this.src; 
    this.src = src.substr(0, src.indexOf('?')) + '?t=' + new Date().getTime() 
}); 

Answer 4

यह एक बहुत ही सरल दृष्टिकोण है कि पर सभी छवियों को संभालती है पृष्ठ।

---

https://github.com/doomhz/jQuery-Image-Reloader

jQuery छवि Reloader

बलों ब्राउज़र टूटी हुई छवियों को लोड फिर से प्रयास करना। क्लाउड में संग्रहीत छवियों के लिए एक सभ्य समाधान (यानी अमेज़ॅन एस 3)।

इसका उपयोग क्यों करें और कब करें? जब आप एक बादल (अर्थात अमेज़न S3) से छवियों को लोड और CDN एक देरी है जब तक छवि पहुँचा जा सकता है

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

प्लगइन कोड

केवल कोड आप प्लगइन सक्रिय करने की आवश्यकता यह है:।

$(".slow-images").imageReloader();