जांचें कि छवियां लोड की गई हैं या नहीं?

Question

मैं एक sulotion कि जाँच लें कि सभी छवियों को लोड किया जाता है इससे पहले कि वे एक छवि स्लाइडर/रोटेटर में किया जाता है के लिए देख रहा हूँ। मैं एक समाधान है कि केवल बटन या छवियों के थंबनेल प्रदर्शित करेंगे, जब मुख्य छवियों एक छवि है कि completey डाउनलोड किया गया hasen't पर क्लिक करने से उपयोगकर्ता को रोकने के लिए लोड किए गए हैं के बारे में सोच रहा था।

Answer 1

.ready jQuery डॉक्स से पाठ load और ready और अधिक स्पष्ट के बीच भेद करने में मदद कर सकता है:

जावा स्क्रिप्ट कोड को क्रियान्वित जब एक पृष्ठ प्रदान की गई है के लिए लोड घटना प्रदान करता है, इस घटना से करता है तब तक ट्रिगर न करें जब तक कि छवियों जैसी सभी संपत्तियों को पूरी तरह से प्राप्त नहीं किया जाता है। ज्यादातर मामलों में, जैसे ही डीओएम पदानुक्रम पूरी तरह से बनाया गया है, स्क्रिप्ट को चलाया जा सकता है। हैंडलर को पहले से ही पास किया गया है() को डीओएम तैयार होने के बाद निष्पादित करने की गारंटी है, इसलिए यह आमतौर पर अन्य सभी ईवेंट हैंडलर संलग्न करने और अन्य jQuery कोड चलाने के लिए सबसे अच्छी जगह है।

... और से .load डॉक्स:

लोड घटना एक तत्व को भेजा जाता है जब यह और सभी उप-तत्व पूरी तरह से लोड किया गया है। यह ईवेंट किसी URL से जुड़े किसी भी तत्व को भेजा जा सकता है: छवियां, स्क्रिप्ट, फ़्रेम, iframes, और विंडो ऑब्जेक्ट।

तो .load वह है जो आप खोज रहे हैं। इस घटना के बारे में क्या बढ़िया बात यह है कि आप इसे केवल डीओएम के सबसेट में संलग्न कर सकते हैं। मान लीजिए कि आप इस तरह एक div में अपने स्लाइड शो छवियों करते हैं:

<div class="slideshow" style="display:none"> 
    <img src="image1.png"/> 
    <img src="image2.png"/> 
    <img src="image3.png"/> 
    <img src="image4.png"/> 
    <img src="image5.png"/> 
</div> 

... तो आप सिर्फ .slideshow कंटेनर पर .load इस्तेमाल कर सकते हैं एक बार कंटेनर में सभी छवियों को गति प्रदान करने के लोड किया गया है, भले ही अन्य की पेज पर छवियों।

$('.slideshow img').load(function(){ 
    $('.slideshow').show().slideshowPlugin(); 
}); 

(मैं तो बस एक उदाहरण के रूप में एक display:none में डाल दिया। यह चित्रों को छिपाने के हैं, जबकि वे लोड करते हैं।)

अद्यतन (2013/04/03)
इस विधि jQuery संस्करण 1.8 के बाद से हटा दिया गया है

Answer 2

बल्कि पता चल सके कि सभी छवियों को लोड किए गए हैं, क्यों नहीं बल्कि सामान्य $(document).ready() से $(window).load() घटना का उपयोग कर स्लाइडर/रोटेटर नहीं बनाते हैं, की तुलना में? पेज के लिए $(window).load() इंतजार लोड होने तक, निष्पादित करने से पहले इस तरह के चित्र के रूप में संसाधनों सहित,।

देखें: window.onload vs. body.onload vs. document.onready (भी स्टैक ओवरफ़्लो पर)।

Answer 3

आप प्रत्येक $('img').load() घटना बंद को गति प्रदान और संबंधित लिंक सक्षम कर सकते हैं/घटना केवल एक बार अपनी लोड शुरू हो रहा है पर क्लिक करें। छवि द्वारा छवि को करने का लाभ यह है कि अगर कुछ छवियों को लोड करने में अधिक समय लग रहा है तो आप अभी भी त्वरित लोगों को 'क्लिक करने योग्य' होने की अनुमति दे सकते हैं।

$('img').load(function() { 
    // find the related link or click event and enable/add it 
});