jQuery: मेरी आवश्यकताओं के लिए दस्तावेज तैयार आग बहुत जल्दी

Question

मैं सभी तस्वीरों के आधार पर एक साइट विकसित कर रहा हूं। सही ढंग से काम करने के लिए इस साइट के कुछ क्षेत्रों में छवि आयामों के आधार पर गणना की आवश्यकता होती है। जो मैंने पाया है वह है कि तैयार दस्तावेज़ बहुत जल्दी फायरिंग कर रहा है और परिणामस्वरूप मेरा गुई गलत तरीके से व्यवहार कर रहा है।

मैंने दस्तावेज़ तैयार फ़ंक्शन को हटा दिया और इसे 'ol window.onload फ़ंक्शन' के साथ बदल दिया, क्योंकि, अगर मैं सही ढंग से पढ़ता हूं, तो यह फ़ंक्शन तब तक आग नहीं लगाता जब तक कि छवियां पूरी तरह से लोड नहीं हो जातीं।

मेरा सवाल है, क्या इससे कोई समस्या होगी? और क्या कोई अन्य समाधान है जिसे मैंने शायद याद किया है?

मदद लोगों के लिए धन्यवाद !!

Answer 1

कोई कारण आप $(window).load() उपयोग नहीं कर सकते के रूप में $(document.ready() करने का विरोध किया है के लिए यह लिंक देखें। जब तक छवियों को पूरी तरह से लोड नहीं किया जाता है (या लोड करने में असफल) तब तक आप फ़ंक्शन नहीं कर रहे फ़ंक्शन के बारे में सही हैं।

पूरी तरह से $(window).load() पर भरोसा करने की खामी हैं कि कुछ मामलों में यह अपने जावास्क्रिप्ट का तत्काल स्पष्ट कोई भी (अर्थात नेविगेशन या क्लिक ईवेंट) काम कर रहा है जब तक आपके पेज पर हर एक आइटम के लोड होते ही है। कुछ उपयोगकर्ता, आमतौर पर एक वेबसाइट के पावर उपयोगकर्ता, पृष्ठों के माध्यम से तेजी से क्लिक करते हैं और यह समग्र उपयोगकर्ता अनुभव से अलग हो जाता है।

खुश मध्यम ज्यादातर स्थितियोंऔर के लिए उपयोग $(window).ready() होगा केवल $(window).load() कि पूरी तरह से उन्हें की आवश्यकता के अंदर घटनाओं डाल दिया।

Answer 2

ऐसा करें:

$(window).load(function() { 
alert("images are loaded!"); 
}); 

$(document).ready() की तुलना और $(window).load()

http://4loc.wordpress.com/2009/04/28/documentready-vs-windowload/

Answer 3

आप संभवतः load() event in jquery का उपयोग कर सकते हैं, हालांकि दस्तावेज़ीकरण में यह उल्लेख किया गया है कि यह तत्व पहले से लोड होने पर अपेक्षित कार्य नहीं कर सकता है।

नोट: लोड केवल तभी काम करेगा जब आप इसे पूरी तरह से लोड करने से पहले सेट करते हैं, अगर आप इसे सेट करते हैं तो कुछ भी नहीं होगा। यह $ (दस्तावेज़) .ready() में नहीं होता है, जो jQuery को उम्मीद के अनुसार काम करने के लिए संभालता है, डीओएम लोड होने के बाद इसे सेट करते समय भी।

$("img.load").load(function(){ 
    alert($(this).width()); 
}); 

अब आप व्यक्तिगत रूप से के रूप में जल्दी के रूप में यह भरी हुई है और नहीं इंतज़ार कर छवि पर कार्रवाई कर सकते हैं: - http://docs.jquery.com/Events/load

Answer 4

window.onload हालांकि अपनी आवश्यकताओं के अनुरूप एक सा होता है, मैं चीजों को तेज करने की सलाह देते हैं तत्वों के पूरे सेट के लिए।

सभी छवियों के लिए width="" और height="" विशेषताओं को शामिल करें:

Answer 5

आप समय की राशि दी गई हो सकता है आप "setTimeout" :)

Answer 6

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

यही है!

यदि आप ऐसा करते हैं, तो document.ready आपके परिदृश्य में ठीक काम करेगा। क्या हो रहा है कि ब्राउज़र को पुनर्प्राप्त/लोड होने से पहले छवियों के आकार को नहीं पता है, इसलिए ब्राउज़र को अनुमान लगाना है। इससे मजाकिया व्यवहार हो सकता है। अपनी छवियों की चौड़ाई और ऊंचाई निर्दिष्ट करना इस समस्या को हल करेगा।

मुझे आश्चर्य है कि किसी ने इसका उल्लेख नहीं किया है। यह जरूरी नहीं है कि जावास्क्रिप्ट समस्या हो, हालांकि cballou's answer निश्चित रूप से अच्छी सलाह है।

वैसे भी, आशा है कि आपने कुछ नया सीखा है। ;)