छवि प्रीलोडिंग अप्रभावी क्यों है?

Question

मेरी सीएमएस परियोजना में स्टाइलिश वेब 2.0 लॉगिन स्क्रीन है जो जावास्क्रिप्ट का उपयोग कर स्क्रीन पर फीका है। यह कैसे आ रहा है कि भले ही मैंने 120% सुनिश्चित किया है कि छवियों को प्रीलोड किया गया है (मैंने विकास उपकरण में संसाधन मॉनीटर का उपयोग किया है) फिर भी जब मेरी लॉगिन स्क्रीन दिखाई देती है तो वे दिखाने के लिए एक सेकंड लेते हैं। यह पूरी तरह से उन्माद को नष्ट कर देता है! एक नज़र डालें: आप लॉगिन क्लिक करते हैं

http://www.dahwan.info/Melior (टूट लिंक)

, स्क्रीन एक 75% अल्फा 1px PNG छवि का उपयोग करते हुए अंधेरे को फीका करने के लिए माना जाता है। भले ही छवि प्रीलोड हो, फिर भी यह एनीमेशन पूरा होने तक दिखाई नहीं दे रहा है। हालांकि, अगर आप रद्द करें पर क्लिक करते हैं और फिर से लॉग इन करते हैं, तो एनीमेशन आसानी से और पूरी तरह से बहता है।

क्या कोई इस समस्या का हल करने के बारे में सोच सकता है? मैं इसे अपने बाकी सीएमएस 'जीयूआई के साथ भी कर रहा हूं। ऐसा लगता है कि अब तक कोई छवि प्रीलोडिंग नहीं हुई थी। आह हाँ, मैं वर्तमान में गूगल क्रोम 5.0.375.99 के लिए इस सीएमएस के विकास कर रहा हूँ, बाद में बहु ब्राउज़र संगतता जोड़ने:

जवाब

संपादित करें के लिए धन्यवाद।

Answer 1

मैं अपनी समस्या के समाधान के साथ आया हूं। मैंने अब तीन अलग-अलग कंप्यूटरों पर सही परिणामों के साथ तीन ब्राउज़रों में इसका परीक्षण किया है। संक्षेप में, जावास्क्रिप्ट में मेरी छवि प्रीलोडिंग फ़ंक्शन में, मैंने प्रत्येक छवियों को एक अदृश्य Div टैग में DOM में जोड़ा।

$('#img_preload').append($('<img />').attr('src', img.src)); 

छवियों अब पेज लोड पर डोम में जोड़ा जा रहा, और मेरे सिद्धांत मेरी लो-एंड कंप्यूटर की स्मृति में आराम कर रही है के अनुसार, वे तुरन्त प्रकट होता है जब मेरी सीएमएस उन्हें जरूरत है।

अपनी टिप्पणी के लिए धन्यवाद :)

Answer 2

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

एक और सुझाव पृष्ठ पर छवि का पता लगाने के बाद तक लॉगिन लिंक पर क्लिक करने योग्यता को अक्षम करना है।

ऐसा करने के लिए काफी स्पष्ट है:
समारोह disableBtn (एल) {
वर btn = document.getElementById (एल);
var btnId = btn.id;
btn.disabled = सत्य;
}

पुनः सक्षम करने के लिए, btn.disabled = false सेट करें (यह पता लगाने के बाद कि आपकी छवि को DOM में जोड़ा गया है)।

Answer 3

तुम भी सिर्फ उन्हें एक सरणी में पहले से लोड कर सकते हैं। आपकी समस्या "कचरा संग्रह" के रूप में जानी जाने वाली चीज़ों के कारण हो सकती है। यह वह जगह है जहां ब्राउजर उन ऑब्जेक्ट्स को देखता है जो स्मृति का उपभोग कर रहे हैं जिनके पास स्क्रीन पर कोई उदाहरण नहीं है और स्मृति में किसी और चीज द्वारा संदर्भित नहीं किया जा रहा है।

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

आपकी समस्या ब्राउज़र-विशिष्ट भी हो सकती है .... मुझे पता चला है कि प्री-लोडेड सामग्री के लिए उन्हें "एन्कोर" बनाना एक छवि सरणी में रखकर और फिर कॉल करने के लिए सरणी का उपयोग करके "एंकर" बनाना सर्वोत्तम होता है इमेज यूआरएल (यूआरआई) की बजाय छवियों की आवश्यकता होती है।

यहां एक त्वरित और गंदा लेख है जो इस विषय को शामिल करता है।

https://web.archive.org/web/1/http://articles.techrepublic%2ecom%2ecom/5100-10878_11-5214317.html

Answer 4

इस समस्या के बारे में एक उपयोगी जानकारी:

Codemonkey समाधान काम करता है क्योंकि, एक छिपा div में छवियों डाल कर, ब्राउज़र एक के लिए स्मृति और तैयार में उन छवियों को रखने के लिए div की दृश्यता में संभावित परिवर्तन। यदि उपयोगकर्ता को छिपे हुए ब्लॉक से div की दृश्यता बदलने की जरूरत है, तो इसे तुरंत किया जाना चाहिए। यही कारण है कि सभी छवियों को सरणी में लोड करना ठीक से काम नहीं करता है।