</div> <div class="no_broken"> "> </div> <div class="no_broken"> "> </div> <div class="no_broken"> " />

सीएसएस के माध्यम से अनुपलब्ध छवियों को बदलें?

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

मैंने सभी छवियों को div की पृष्ठभूमि से लपेटने की कोशिश की है:

<div class="no_broken">
  
</div>

<div class="no_broken">
  
</div>

सीएसएस:

div.no_broken { 
  background-image: url(standard.gif); 
}

div.no_broken, div.no_broken img { 
  width: 32px; 
  height: 32px; 
  display: block; 
}

लेकिन यदि आईएमजी पारदर्शी है तो यह एक-दूसरे के शीर्ष पर दो छवियां प्रदर्शित करेगा।

 0
जोड़ा संपादित
विचारों: 9
स्रोत

5 उत्तर

जहां तक ​​मुझे पता है, कोई सीएसएस संपत्ति नहीं है जो टूटी हुई छवियों के प्रदर्शन को नियंत्रित करती है। शायद ब्राउज़र-विशिष्ट गुण हैं? पृष्ठ पर छवियों को फिर से चलाने के लिए आपको जावास्क्रिप्ट का सहारा लेना पड़ सकता है, और यदि वे टूटे हुए हैं तो उनके स्रोत को प्रतिस्थापित कर सकते हैं।

0
जोड़ा
स्रोत

यह सीएसएस के बिना काम करता है:

यह जावास्क्रिप्ट अक्षम होने पर भी काम करता प्रतीत होता है।

0
जोड़ा
स्रोत
अजीब है कि। मुझे जावास्क्रिप्ट की तरह दिखता है:/ओह ठीक है। यह ब्राउज़र में पहली और न ही आखिरी विषम सुविधा है
जोड़ा लेखक Gene, स्रोत
जावास्क्रिप्ट अक्षम होने पर यह काम नहीं करता है। और अगर वैकल्पिक.जेपीजी गलती से गायब हो तो यह एक अनंत लूप का कारण बन जाएगा।
जोड़ा लेखक asiby, स्रोत
इसे पूरी तरह से सीएसएस का उपयोग करने के लिए, आप इस लिंक को डेवलपर देख सकते हैं। mozilla.org/en-US/docs/CSS/:-moz-broken , फिर उन अन्य ब्राउज़रों के बराबर पाएं जिन्हें आप लक्षित कर रहे हैं।
जोड़ा लेखक asiby, स्रोत
यह काम करेगा लेकिन यदि वैकल्पिक.jpg छवियां अनुपलब्ध भी हैं तो ब्राउज़र इसके लिए अनुरोधों की अनंत संख्या बना देगा। इसी कारण से मैं नीचे ब्रोक्स से जवाब पसंद करता हूं।
जोड़ा लेखक cmorris, स्रोत
वैकल्पिक.jpg के लिए अनुरोधों की अनंत संख्या को समाप्त करने के लिए, त्रुटि हैंडलर को इसमें बदलें:
जोड़ा लेखक kmoser, स्रोत

मैं नहीं जानता कि आप किस तकनीक का उपयोग कर रहे हैं लेकिन एएसपीनेट में नियंत्रण नियंत्रक कहा जाता है।

मैंने इसका उपयोग सभी छवियों के प्रीरेंडर को कैप्चर करने के लिए किया है और इमेजुरल को पूरा नहीं होने पर इमेजुरल को प्रतिस्थापित किया है।

मुझे नहीं पता कि यह आपकी स्थिति से बिल्कुल संबंधित है या नहीं, निश्चित रूप से काम नहीं करेगा जब पथ है लेकिन पथ पर छवि नहीं है।

0
जोड़ा
स्रोत

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

$(document).ready(function() {
    $('.no_broken img').error(function() {
        $(this).addClass('broken');
    });
});

और फिर आपके सीएसएस में आप कुछ ऐसा कर सकते हैं

div.no_broken, div.no_broken img { 
  width: 32px; 
  height: 32px; 
  display: block; 
}

div.no_broken img.broken {
    background-image: url(standard.gif);
    content:"";
}
0
जोड़ा
स्रोत
मुझे यह पसंद है लेकिन टूटी हुई छवि की सामग्री: "" या display: none को मेरे लिए अन्य लेआउट समस्याएं उत्पन्न हुई हैं। अस्पष्टता: 0 का उपयोग करके उस समस्या को हल किया गया।
जोड़ा लेखक cmorris, स्रोत

सोचा था कि मैं एक जवाब में kmoser से टिप्पणी पैकेज करूंगा। आतंक हैंडलर को साफ़ करना एक अच्छा विचार है क्योंकि लूप संभव है।

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

function epic(c) {
    c.onerror='';
    c.src='alternative.jpg';
};

एचटीएमएल

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

0
जोड़ा
स्रोत