2013-03-20 5 views
5

OnLoad मेरे वेबपृष्ठ के हैंडलर में मैं यह जांचने की कोशिश कर रहा हूं कि सभी छवियां सही तरीके से लोड हो गई हैं या नहीं।कैसे जावास्क्रिप्ट का उपयोग कर छवियों को लोड किया गया है यह जांचें?

मैं सभी <img> टैग पर पुनरावृत्ति कर रहा हूं और उन्हें अपने isImageLoaded() फ़ंक्शन के साथ जांच रहा हूं। दुर्भाग्य से मेरा फ़ंक्शन केवल फ़ायरफ़ॉक्स और आईई के साथ संस्करण 8 तक काम करता है।

कोई सुझाव मैं आईई 9 और 10 में काम करने के लिए कैसे प्राप्त कर सकता हूं?

function isImageLoaded(img) { 
    // check for IE 
    if (!img.complete) { 
     return false; 
    } 
    // check for Firefox 
    if (typeof img.naturalWidth != "undefined" && img.naturalWidth == 0) { 
     return false; 
    } 
    // assume it's ok 
    return true; 
} 

अद्यतन: यह मुख्य अपराधी पता चला है से पहले सभी छवि IE9 + द्वारा लोड किए गए हैं कि OnLoad निकाल दिया जा सकता है। पृष्ठ में छवियों की जांच करने के लिए एक बेहतर ट्रिगर क्या होगा? मैं उन सभी को एक बार में जांचना पसंद करूंगा, न कि व्यक्तिगत ऑनलोड/ऑनरर हैंडलर के साथ।

+0

धन्यवाद sdespont! मैं पृष्ठ आकार को रखने के लिए लाइब्रेरी का उपयोग करने से बचने की कोशिश कर रहा हूं। –

+0

क्या आपने प्रत्येक छवि के लिए 'ऑनलोड' ईवेंट हैंडलर जोड़ने और कितनी बार आग लगाई है? –

+0

मैं वर्तमान में ऑनलोड लोड हैंडलर का उपयोग कर रहा हूं। मुझे लगता है कि केवल एक बार बुलाया जाता है। क्या आपको लगता है कि छवियों को पूरी तरह लोड होने से पहले IE 9 + 10 इसे कॉल करें? –

उत्तर

1

मेरे वेबपृष्ठ के ऑनलोड हैंडलर में मैं यह जांचने की कोशिश कर रहा हूं कि सभी छवियां सही तरीके से लोड हो गई हैं या नहीं।

मुझे लगता है कि आप body.onload या <body onload=""> का उपयोग कर रहे हैं? यह अभी भी मतलब यह होना चाहिए का उपयोग करके कि सभी छवियों को सभी लोड किए गए हैं — हालांकि,:

window.addEventListener('load', function(){ 
    /// everything in the page has loaded now 
}); 

या IE के पुराने संस्करणों के लिए:

window.attachEvent('onload', function(){ 
    /// everything in the page has loaded now 
}); 

आप ब्राउज़रों में एक अधिक संगत व्यवहार मिल जाएगा, और मैं एक तथ्य के लिए पता है कि window.onload केवल एक बार लोड होने के बाद ही ट्रिगर होगा (जिसमें जावास्क्रिप्ट और सीएसएस जैसे सभी अन्य संसाधन शामिल हैं)। इस कड़ी में दिलचस्प हो सकता है:

window.onload vs <body onload=""/>

तो ऊपर, अपने कार्य एक छोटे से redundent करना चाहिए जब तक आप पेज में छवियों को इंजेक्शन लगाने के बाद कर रहे हैं onload गतिविधि सक्रिय हो गया है। बस एक अतिरिक्त नोट के रूप में

Cross Browser Dom Ready

: यदि फिर भी, आप चीज़ों को गति और नहीं सब कुछ के लिए इंतजार करना तुम एक डोम तैयार श्रोता इस्तेमाल कर सकते हैं डाउनलोड करने के लिए और फिर विधि kennypu ने उल्लेख लागू करने के लिए करना चाहता था , जहाँ तक मुझे पता है हूँ, image.complete सभी आधुनिक ब्राउज़रों के लिए काम करना चाहिए:

https://developer.mozilla.org/en-US/docs/DOM/HTMLImageElement

+0

मैं वास्तव में विंडो का उपयोग कर रहा था। विंडो में अपलोड और स्विचिंग।addEventListener चीजों को थोड़ा बेहतर बना दिया, लेकिन फिर भी कभी-कभी विफल रहता है। यह मुझे विश्वास दिलाता है कि यह वास्तव में एक समय है जब ऑनलोड लोडर कहा जाता है और आईई 9 और 10 इसे बहुत जल्दी कॉल करते हैं ... –

+0

@GeneVincent यदि आप अपना अधिक कोड पोस्ट करते हैं तो StackOverflow समुदाय आपको वास्तव में डीबग करने में मदद कर सकता है चल रहा है - विशेष रूप से आपका 'ऑनलोड' हैंडलर, लेकिन अधिक जानकारी बेहतर है। – Pebbl

संबंधित मुद्दे