jQuery का उपयोग कर आईई में टूटी हुई छवियों को कैसे छिपाना है?

Question

मैंने इस साइट को jQuery साइट से कॉपी करने का प्रयास किया है, लेकिन यह आईई 7/आईई 8 में विफल रहता है, लेकिन अन्य ब्राउज़रों में काम करता है। इस कोड के साथ क्या गलत है, यह jQuery साइट से है (http://api.jquery.com/error/)। मैं jQuery संस्करण 1.4.4 का उपयोग कर रहा हूँ।

$(document).ready(function(){ 
    $("img").error(function(){ 
    $(this).hide();  
    });  
}); 

Answer 1

समस्या यह है कि समय $(document.ready) निष्पादित किया जाता है द्वारा, छवि पहले से ही लोड हो जाए, तो लोड/त्रुटि घटनाओं अब और ट्रिगर नहीं किया जाएगा।

एक ही रास्ता है कि मैं इस बायपास करने के बारे में सोच सकते हैं छवि, इस प्रकार "बल" घटना ट्रिगर किए जाने वाले को फिर से लोड करने के लिए है:

$(document).ready(function(){ 
    $("img").each(function(index) { 
     $(this).error(function() { 
      $(this).hide();  
     }); 
     $(this).attr("src", $(this).attr("src")); 
    });  
}); 

यह छवियों के रूप में प्रदर्शन पर बहुत बुरा नहीं होना चाहिए होगा संभवतः कैश से लिया जाना चाहिए, वास्तव में सर्वर से पुनः लोड नहीं किया गया है। , http://jsfiddle.net/yahavbr/QvnBC/1/

Answer 2

ऊपर समाधान का उपयोग अभी भी 'टूट छवि आइकन' का एक संक्षिप्त उपस्थिति का कारण होगा error() और hide() के बीच एक विलंबता है क्योंकि:

लाइव परीक्षण का मामला (शांत बिल्लियों के साथ)) यहाँ उपलब्ध है ।

मैंने jQuery imagesloaded plugin का उपयोग किया जो छवि सफलतापूर्वक लोड होने पर कॉलबैक की अनुमति देता है। सबसे पहले मैंने छवि को visibility:hidden पर सेट किया। तब मैं इसे visible करने के लिए सेट जब इसे सफलतापूर्वक लोड करता है:

$('div.target img').each(function(){ 
    $(this).imagesLoaded(function(){ 
    $(this).css('visibility','visible'); 
    }) 
}) 

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

Answer 3

आईई 8 में मेरे मामले में, मेरी प्रतिस्थापन छवि अभी भी लोड नहीं हो रही थी। नीचे दिया गया कोड मेरे लिए यह तय किया गया है। सबसे अच्छा काम करने के लिए आपको टाइमआउट देरी के साथ खेलना पड़ सकता है।

setTimeout(function() { 
    $("img").each(function() { 
     $(this).error(function() { 
      $(this).attr("src", "../imageupload/image-failed.png"); 
     }); 
     $(this).attr("src", $(this).attr("src")); 
    }); 
}, 100);