टूटी हुई छवियों को संभालने का सबसे अच्छा तरीका क्या है?

Question

तो एचटीएमएल पेज पर टूटी हुई छवियों को संभालने के कुछ तरीके शांत हैं। मैं जानना चाहता हूं कि लोकप्रिय उपयोग में कौन से तरीके हैं और सर्वोत्तम तरीकों के लिए किन तरीकों को देखा जाता है?

शुरू करने के लिए मैं कुछ देखा है अपने आप की तरह है:

function imgErr(source) {  
    source.src = /images/missing.jpg"; 
    source.onerror = ""; 
    return true; 
} 
<img src="test.jpg" alt="test" title="test" onerror="imgErr(this);" /> 

सकारात्मक: हर काम करता है, घटना हमेशा पकड़ा दिया जाएगा। उपयोगकर्ता कभी टूटी हुई छवि नहीं देखता है। ब्राउज़रों में अच्छी तरह से काम करने लगता है। विपक्ष: onerror टैग प्रत्येक छवि पर आवश्यक है, समारोह imgErr (स्रोत), सिर त्रुटियों को पकड़ने के लिए में होने की जरूरत है धीमा कर देती है नीचे उपयोगकर्ताओं लोड समय

$('img').error(function(){ 
    $(this).attr('src', 'missing.jpg'); 
}); 

पेशेवरों का अनुभव: बहुत कम कोड, सभी छवियों पर काम करता है उनके मार्कअप को बदले बिना सिर विपक्ष के बाहर होने वाला हो सकता है:, पृष्ठों ऑनलोड घटना की गति के आधार त्रुटि घटना को छोड़ सकता है उपयोगकर्ताओं को धीमा कर देती अनुभव लोड समय

$(window).load(function() { 
    $("img").each(function() { 
     if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) { 
      var src = $(this).attr("src"); 
      var suffix = src.substring(src.length - 6, src.length).split('.')[0]; 
      suffix = suffix.charAt(suffix.length - 1);    
      $(this).attr("src", "/static/images/generic/missing_" + suffix + ".jpg"); 
     } 
    }); 
}); 

सकारात्मक: कहीं भी रखा जा सकता है पृष्ठ पर, छवियों को ठीक करेगा, चाहे वह चलने पर कोई फर्क नहीं पड़ता, उपयोगकर्ता को धीमा नहीं करता है अनुभवी लोड समय विपक्ष: एक खराब छवि अनुभव दिखाता है जब तक यह खराब उपयोगकर्ता अनुभव नहीं चलाता

मेरी स्थिति में लोड समय सबसे बड़ा मुद्दा है, लेकिन मुझे आईई में सही तरीके से काम करने का अंतिम विकल्प नहीं मिल रहा है क्योंकि यह टूटा हुआ है और कोई भी टूटी हुई छवियों को समान रूप से नहीं!

चीयर्स, डेनिस

Answer 1

एक विचार जो मन में वसंत अपने वेब सर्वर पर एक छवि हैंडलर बनाने के लिए है करता है, यानी

<img src="fetchimage.aspx?name=test.jpg" alt="test" title="test" /> 

aspx पर ध्यान न दें, स्पष्ट रूप से यह साथ प्रतिस्थापित किया जाना था जो कुछ भी आपकी पसंदीदा सर्वर स्क्रिप्टिंग तकनीक थी। वह हैंडलर तब उन छवि नामों से निपट सकता है जो सभी अज्ञात छवि नामों के लिए आपकी missing.jpg को वितरित करके मौजूद नहीं हैं।

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

Rock-> आप < -Hardplace

Answer 2

मेरी राय में, का उपयोग कर alt टैग के लिए पर्याप्त है और इसके लिए हर बार की जाँच जावास्क्रिप्ट का उपयोग करके पृष्ठ के लिए जटिलता जोड़ने के लिए कोई ज़रूरत नहीं है।

बेशक आपको एक बार में हर बार जांचना होगा कि आपके पास टूटी हुई छवि नहीं है। There are tools to do it।

Answer 3

आदर्श रूप से alt टैग का उपयोग किया जाना चाहिए। यदि यह महत्वपूर्ण है तो जावास्क्रिप्ट समाधान वास्तव में आदर्श नहीं है क्योंकि जेएस बंद होने पर यह काम नहीं करेगा। हालांकि आप सर्वर साइड समाधान की तरह कर सकते हैं। Php में कुछ ऐसा किया जा सकता है लेकिन किसी डेटाबेस या चर सेट करने के किसी प्रकार की आवश्यकता होगी।

<?php 
if($image !== ''){?> 
<?php echo '<img src="$imgsrc" alt="$imgalt" />' ?> 
} 
<?php else { 
<?php echo '<img src="$imgmissing" alt="$imgalt" />' ?> 
} ?> 
<?php } ?>