2011-09-23 16 views
8

मैंने इसे आईओएस 4.3 से 5.0 पर देखा है। जब आप एक साधारण ऑफ़लाइन वेब ऐप बनाते हैं, जिसका मतलब है कि एक HTML फ़ाइल + सीएसएस और जेएस (कैश मैनिफेस्ट में मौजूद सभी) जैसी कुछ संपत्तियां, यह ऑफ़लाइन काम करती है (मैंने हवाई जहाज मोड में परीक्षण किया) - लेकिन, जब आप जोड़ते हैं इस तरह के एक ऐप को अपनी होम स्क्रीन पर खोलें और इसे पूर्णस्क्रीन मोड में खोलें, यह पहली बार प्रारंभिक सामग्री, प्रदर्शित करता है, फिर सबकुछ (पृष्ठ सफेद हो जाता है) आधा सेकेंड या उससे अधिक के लिए गायब हो जाता है, फिर सामग्री फिर से दिखाई देती है।सामग्री ऑफ़लाइन वेब ऐप लोड पर एक सेकंड के अंश के लिए गायब हो जाती है

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

यह एक बड़ी समस्या है क्योंकि यह किसी ऐप की गैर-नैतिकता को दूर करती है और यह इंप्रेशन देती है कि ऐप प्रदर्शन और छोटी गाड़ी के लिए अनुकूलित नहीं है।

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

उत्तर

5

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

  • आप छवि आयाम के आधार पर गतिशील ऊंचाइयों है, लेकिन आप नहीं मार्कअप या CSS में छवि आयाम निर्धारित किया है।
  • आपका लेआउट टेबल पर आधारित है और आप सीएसएस में 'टेबल लेआउट: फिक्स्ड' का उपयोग नहीं कर रहे हैं।
  • आपका HTML दस्तावेज़.write() के साथ इनलाइन स्क्रिप्ट का उपयोग करता है।
  • आपके पास कुछ प्रकार का ऑनलोड() फ़ंक्शन है जो सामग्री को प्रकट/संशोधित करता है।
  • आप बाहरी स्टाइलशीट से लिंक करते हैं।
  • आप अनचाहे बाहरी सामग्री का उपयोग कर रहे हैं या आपने कैशिंग अक्षम कर दी है।
  • आप बाहरी सामग्री का उपयोग कर रहे हैं जो 404 लौट रहा है या ऑफ़लाइन उपलब्ध नहीं है।

क्या आपका HTML/CSS परीक्षण आईओएस संस्करणों के बीच बदल गया है?

+0

नहीं, एचटीएमएल/सीएसएस नहीं बदला है। हालांकि, बाहरी संपत्तियों के बारे में अच्छी बात है। मैं देखूंगा कि यह सीएसएस इनलाइन लाने में मदद करता है या नहीं। – mislav

+2

क्या आपने समस्या हल की है? क्या आप समझ गए कि इसका क्या कारण था? –

1

मुझे लगता है कि यहां क्या होता है यह है कि आईओएस मुख्य मेनू में जोड़े जाने पर पृष्ठ से एक स्क्रीनशॉट लेता है। फिर यह स्क्रीनशॉट एप्लिकेशन लोड (वेबकिट लोड) के दौरान प्रदर्शित होता है। वेबकिट पेज को प्रतिपादित करना शुरू कर देता है और पृष्ठ स्वयं ही इस तरह से बनाया जाता है कि पृष्ठ सामग्री तत्काल उपलब्ध नहीं होती है, जिससे एक सफेद फ्लैश होता है जो पृष्ठ की सामग्री अभी तक नहीं है,

आप इससे बच सकते हैं अपने जेएस/सीएसएस का निर्माण करके एक निश्चित स्तर पर समस्या है ताकि यह प्रारंभिक HTML दृश्य को तेज़ी से लोड कर सके और फिर पृष्ठभूमि पर शेष संसाधनों को आलसी लोड/बनाता है। इसके अलावा आप पृष्ठ से डिफ़ॉल्ट स्क्रीनशॉट आईओएस के बजाय कस्टम लोडिंग स्क्रीन सेट कर सकते हैं।

हो सकता है कि अगर आप अपने आप को अपने एप्लिकेशन का एक स्क्रीनशॉट ले सकते हैं और उसके बाद कुछ इस तरह है:

<body style="background: white url('my-initial-loading-screen.png')" /> 

... और सुनिश्चित करें कि छवि उपलब्ध है और प्रकट से आता है।

या इससे भी बेहतर, स्क्रीन लोड हो रही है जिसके लिए किसी बाहरी संसाधन को दिखाने की आवश्यकता नहीं है (केवल सादा HTML) ताकि आपको पता चले कि ब्राउज़र को कुछ भी लोड करने की आवश्यकता नहीं है।

+0

आप आईओएस के बारे में स्क्रीनशॉट लेने के बारे में सही हैं, पहले इसे फायर कर रहे हैं और बाद में पृष्ठ को फिर से तैयार कर रहे हैं। फिर भी, पूरे पृष्ठ को बीच में साफ़ करने की आवश्यकता क्यों होगी? इसके अलावा, ग्लाइफोर्ड (जो स्पष्ट रूप से समस्या को प्रदर्शित करता है) में "सेब-टच-स्टार्टअप-इमेज" और पृष्ठभूमि रंग और जो कुछ भी गायब हो जाता है, दोनों में है। ऐसा लगता है कि आप इसे रोकने के लिए पेज से कुछ भी नहीं कर सकते हैं। – mislav

+0

बाद में पृष्ठ को फिर से निकालने से आपके जावास्क्रिप्ट कोड, HTML लेआउट या सामग्री से संबंधित हो सकता है - मुझे पूरा यकीन है कि आप इससे बच सकते हैं। आप जो देखते हैं वह यह है कि ब्राउजर ट्रिगर करता है https://code.google.com/speed/articles/reflow.html –

2

मैं इस के उपयोग की वजह से हो पाया है: एक न्यूनतम पेज के साथ

<meta name="viewport" content="width=device-width initial-scale=1.0 maximum-scale=1.0 user-scalable=0"> 

, मैं सेब के स्पर्श स्टार्टअप छवि और पेज की सामग्री का उपयोग करता है, तो मैं के बीच एक सफेद फ़्लैश मिलता है व्यूपोर्ट मेटा टैग। अगर मैं टैग लेता हूं, कोई फ्लैश नहीं।

टैग को प्रोग्रामिक रूप से सेट करके समस्या के आसपास काम करना संभव है।

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