जब स्रोत स्रोत नहीं मिला है तो स्रोत स्रोत नहीं मिला है जब "स्रोत नहीं मिला" आइकन चुपचाप छिपाने के लिए

Question

क्या आप जानते हैं कि क्लासिक "छवि नहीं मिली" आइकन किसी फ़ाइल फ़ाइल को नहीं मिला है?

जावास्क्रिप्ट/jQuery/सीएसएस का उपयोग कर कोई भी कामकाजी विधि?

var img = document.getElementById("myImg"); 
img.onerror = function() { 
    this.style.display = "none"; 
} 

jQuery में (जब से तुम से पूछा):

Answer 1

आप जब एक छवि को लोड करने में विफल रहता है कार्य करने के लिए जावास्क्रिप्ट में onerror घटना का उपयोग कर सकते

$("#myImg").error(function() { 
    $(this).hide(); 
}); 

या सभी छवियों के लिए:

$("img").error(function() { 
    $(this).hide(); 
    // or $(this).css({visibility:"hidden"}); 
}); 

आपको .hide() के बजाय visibility: hidden का उपयोग करना चाहिए यदि छुपाएं ई छवियों लेआउट बदल सकता है। वेब पर कई साइटें डिफ़ॉल्ट छवि स्थान अनुपलब्ध होने पर उस छवि पर src विशेषता को इंगित करते हुए डिफ़ॉल्ट "कोई छवि" छवि का उपयोग नहीं करती हैं।

Answer 2

एंडी ई के जवाब पर एक त्वरित अनुसंधान कर, live() बाँध error करने के लिए अपनी संभव नहीं।

// won't work (chrome 5) 
$('img').live('error', function(){ 
    $(this).css('visibility', 'hidden'); 
}); 

तो तुम जैसे

$('<img/>', { 
    src: 'http://www.notarget.com/fake.jpg', 
    error: function(e){ 
    $(this).css('visibility', 'hidden'); 
    } 
}).appendTo(document.body); 

सीधे एक नए तत्व बनाने पर error event handler बाध्यकारी जाना है।

Answer 3

<img onerror='this.style.display = "none"'> 

Answer 4

हर छवि त्रुटि को छुपाने के लिए, बस अपने पेज (बस से पहले बंद करने शरीर टैग) के तल पर इस JavaScript जोड़ें:

(function() { 
    var allimgs = document.images; 
    for (var i = 0; i < allimgs.length; i++) { 
     allimgs[i].onerror = function() { 
      this.style.visibility = "hidden"; // Other elements aren't affected. 
     } 
    } 
})(); 

Answer 5

यह थोड़ा देर से जवाब देने के लिए हो सकता है, लेकिन यहाँ है मेरा प्रयास जब मुझे एक ही समस्या का सामना करना पड़ा, तो मैंने इस div में छवि & सेटिंग पृष्ठभूमि-छवि के आकार का एक div का उपयोग करके इसे ठीक किया। अगर छवि नहीं मिली है, तो div को पारदर्शी प्रदान किया जाता है, इसलिए यह सब जावा-स्क्रिप्ट कोड के बिना चुपचाप किया जाता है।

Answer 6

मैं, वास्तव में यह करने के लिए एक गंधा विधि पाया है, जबकि अभी भी कार्यात्मक जा रहा है जब की तरह Angular.js में ng-src निर्देशों का उपयोग और ...

<img 
    ng-src="{{myCtrl.myImageUrlThatWillDynamicallyChange}}" 
    onerror="this.src='data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=='" 
    /> 

यह मूल रूप से एक कम से कम पारदर्शी GIF है (जैसा कि देखा http://proger.i-forge.net/%D0%9A%D0%BE%D0%BC%D0%BF%D1%8C%D1%8E%D1%82%D0%B5%D1%80/[20121112]%20The%20smallest%20transparent%20pixel.html)

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

<script> 
    window.fallbackGif = "..." 
</script> 

और प्रयोग

<img 
    ng-src="{{myCtrl.myImageUrlThatWillDynamicallyChange}}" 
    onerror="this.src=fallbackGif" 
    /> 

आदि

Answer 7

मैं थोड़ा समाधान गैरी Willoughby ने सुझाव दिया संशोधन किया है, क्योंकि यह कुछ समय के लिए टूटी हुई छवि को दर्शाता है।मेरा समाधान:

<img src="..." style="display: none" onload="this.style.display=''"> 

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