jQuery मोबाइल का उपयोग करते समय लोड होने पर व्हाइट पेज

Question

हम मोबाइल HTML5 एप के लिए jQuery मोबाइल 1.3.2 का उपयोग कर रहे हैं www.tekiki.com पर। (किसी आईफोन से जांचें, या डेस्कटॉप से ​​www.tekiki.com/dandy/dandy देखें।)

लोड होने पर, जेक्यूएम लोडिंग स्क्रीन और ऐप के पहले पृष्ठ के बीच एक सफेद पृष्ठ दिखाता है। क्या लोडिंग स्क्रीन को दबाने के लिए जेक्यूएम में सेटिंग्स हैं? हमने पाया सबसे नज़दीकी $.mobile.loading() था, लेकिन यह केवल लोडिंग टेक्स्ट से संबंधित है। हम पूरी सफेद स्क्रीन गायब होना चाहते हैं, जिसका अर्थ है कि ऐप को लोडिंग स्क्रीन से सीधे पहले पृष्ठ पर जाना चाहिए।

Answer 1

सफेद स्क्रीन आप इस वर्ग JQM सीएसएस में घोषित से परिणाम के बारे में बात कर रहे हैं:

/*fouc*/ 
.ui-mobile-rendering > * { visibility: hidden; } 

वर्ग जोड़ा जाता है जब JQM initalize को

// Add mobile, initial load "rendering" classes to docEl 
$html.addClass("ui-mobile ui-mobile-rendering"); 

शुरू होता है और हटाया पर पहले pageshow।

पूरी प्रक्रिया आवश्यक है, क्योंकि जब तक आप जेक्यूएम इसे प्रस्तुत नहीं कर लेते हैं तब तक आप प्री-एन्हांस्ड मार्कअप देखेंगे। तो आप इसे "निकालें" करना चाहते हैं, आप यह घोषणा कर सकते हैं:

.ui-mobile-rendering > * { visibility: visible; } 

लेकिन आप अपने सभी स्रोत कोड jQuery मोबाइल द्वारा स्पर्श किया जा रहा देखना होगा।

समाधान मुझे पता है: JQM के बजाय

आपूर्ति पूर्व बढ़ाया मार्कअप JQM 1.4 (जहां बहुत कम तत्वों और JQM बताने का विकल्प उत्पन्न होगा इससे पहले कि यह
यह एक कठिन परीक्षा की तरह है कर , जो विगेट्स को पूर्व-उन्नत प्रदान किया जा रहा है), लेकिन फिर भी कुछ विजेट पुनर्लेखन की आवश्यकता के बावजूद किया जा सकता है।

इसके अलावा जो भी मैं आपके कोड में देखता हूं, आपकी समस्या यह होनी चाहिए कि आईओएस स्टार्टअप छवि गायब हो जाती है (= जेक्यूएम शुरू होने से पहले) बनाम। आप उस पर नियंत्रण रखते हैं और जेक्यूएम पूरा होने पर इसे छुपाते हैं।तो

: एक कस्टम स्टार्टअप स्क्रीन
उदाहरण के लिए की तरह coverup के कुछ अन्य साधनों का उपयोग करें, मैं this या this कर रहा हूँ। दोनों अनुप्रयोगों को जरूरी जेएस के साथ लोड किया गया है और मैंने लिखा एक कस्टम स्टार्टअप स्क्रिप्ट का उपयोग करें (आईओएस स्टार्टअप छवियों के साथ अपने बालों को खींचने के बाद)।

• शरीर के लिए splash के एक वर्ग को जोड़ने:

  यह ऐसे काम करता है। CSS:before एक पूर्ण सफेद पृष्ठभूमि (... लोड हो रहा है)

• सीएसएस या जावास्क्रिप्ट के जरिए वैकल्पिक पृष्ठभूमि छवि जोड़ (कोई jQuery या JQM, क्योंकि यह से पहले चलाना चाहिए या तो पार्स किया गया है)
• शरीर से pageshow पर splash को हटा दें। जैसा कि आप हमेशा उस पृष्ठ पर रहते हैं जिसे आपने पहले लोड किया था (जब तक आप rel="external" का उपयोग नहीं करते हैं, body बनी रहती है, इसलिए आप अपने सभी पृष्ठों पर कक्षा को सुरक्षित रूप से जोड़ सकते हैं और यह केवल उपयोगकर्ता द्वारा लोड किए गए पहले पृष्ठ पर कवरअप चलाएगा।

यह जेक्यूएम होने पर सेट की गई स्टार्टअप स्क्रीन को छुपाता है, इसलिए आपके पास एक सफेद स्क्रीन नहीं होगी। इसके अलावा यह क्रॉस-ब्राउज़र (बनाम आईओएस स्टार्टअप छवि) का काम करता है और आसानी से विभिन्न छवि आकारों के साथ उपयोग किया जा सकता है (दूसरे एप्लिकेशन को आजमाएं विभिन्न उपकरणों & portait/परिदृश्य)।

आप एक पूर्ण कोड नमूना चाहते हैं, मुझे पता है।

Answer 2

मैं थोड़ा और अधिक यहाँ जानकारी लगता है ..

• एक ही परियोजना की लोडिंग और लैंडिंग पृष्ठों हिस्सा हैं?

• क्या आप लोडिंग स्क्रीन और लैंडिंग पृष्ठ के बीच कोई पूर्ण ताज़ा नहीं हो सकते हैं?

अन्य सुझाव:

• अगर दोनों लदान और लैंडिंग स्क्रीन एक ही परियोजना (डोमेन) के हैं, changePage (http://api.jquerymobile.com/jQuery.mobile.changePage/) का उपयोग लैंडिंग पृष्ठ बुला, लोड होने से प्रयास करें। इस तरह, लोडिंग आइकन जारी रखना चाहिए।

• आप एक नए लैंडिंग पृष्ठ पर इंगित कर सकते हैं और देख सकते हैं कि यह श्वेत स्क्रीन दिखाई नहीं दे रही है या नहीं। शायद इस लैंडिंग पृष्ठ के साथ कुछ गलत है।

Answer 3

$(function(){ 
    setTimeout(hideSplash, 2000); 
}); 

$(function hideSplash() { 
    $.mobile.changePage("*Jquery Mobile Page here*", { 
     transition: "slidedown", 
     reverse: false, 
     changeHash: false 
    }); 
}); 

इस कोड को किसी भी आंतरिक या बाहरी जेएस फ़ाइल में जोड़ें।