2014-10-09 3 views
6

में रीफ्रेश पर ग्लाइफिकॉन ब्लिंक मैं बूटस्ट्रैप ग्लाइफ़िकॉन का उपयोग कर रहा हूं। वे अच्छी तरह से काम कर रहे हैं, लेकिन क्रोम ब्राउज़र के साथ, glyphicons झपकी पृष्ठ लोड होनेक्रोम

उदाहरण के लिए:

  1. ओपन बूटस्ट्रैप पर इस लिंक:
  2. एक बार भरी हुई , F5 दबाएं या रीफ्रेश करें।
  3. आप ग्लाइफ़िकॉन ब्लिंक देखेंगे।

मैं इसे कैसे ठीक कर सकता हूं ताकि वे झपकी न सकें?

Example

नोट:: यह केवल क्रोम, एफएफ या IE नहीं में होता है

यहाँ एक स्क्रीनशॉट है।

उत्तर

6

आम तौर पर, यह flash of unstyled content (FOUC) होने में समस्या है।

विशेष रूप से, यह है कि क्या पॉल आयरिश कॉल एक flash of unstyled text (FOUT) है:

में फ़ायरफ़ॉक्स, मूल रूप से पाठ एक डिफ़ॉल्ट webfont में है जब तक कस्टम फ़ॉन्ट के लिए तैयार है

FF

वेबकिट बहुत different approach लेता है, और बहुत जानबूझकर। उनका मानना ​​है कि फ़ॉन्ट तैयार होने तक पाठ को अदृश्य रखना बेहतर है। इस तरह से, वहाँ कोई पल जहां इसकी हाल ही में अपग्रेड स्वयं

Webkit

दूसरे शब्दों में में पाठ चमक, इस मुद्दे को इतनी आसानी से दूर नहीं कर रहा है।

आप करने का प्रयास कर सकते हैं को कम से प्रभाव:

  • gzip का उपयोग फ़ाइल हटना तो यह डाउनलोड करता है जल्दी
  • कैशिंग का उपयोग करना तो ग्राहक एक मौजूदा प्रतिलिपि का उपयोग करने के बजाय कर सकते हैं एक नया हथियार

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

+0

महान जवाब और भयानक संपादित btw! gzip पहले से ही इस्तेमाल किया जा रहा है। जैसा कि मैं समझता हूं, यह सिर्फ एक वेबकिट चीज है। मेरा सबसे बड़ा मुद्दा यह था कि चूंकि ग्लाइफिकॉन बाद के चरण में लोड हो गए थे, इसलिए मेरा दूसरा टेक्स्ट/लेआउट बदल रहा था क्योंकि पहले ग्लाइफ़िकॉन केवल 1 पीएक्स है और जब यह लोड होता है, तो यह उदा। 15 पीएक्स मैंने तय किया कि ग्लाइफिकॉन को एक निश्चित आकार देकर। – Timo002

1

मुझे बिल्कुल वही समस्या थी लेकिन आईआईएस में .woff और .woff2 को नए एमआईएम-प्रकार font/x-woff के रूप में जोड़कर हल किया गया।

इसने ग्लिफ-आइकनों को तुरंत झपकी से रोक दिया क्योंकि क्रोम अब फ़ॉन्ट-फ़ाइल को सही तरीके से कैश करता है।

यह देखने के लिए कि क्या यह आपके लिए लागू हो सकता है, यह उस साइट पर क्रोम (एफ 12) में डीबग-कंसोल खोलें और आपको ग्लिफ-फ़ॉन्ट-फाइल से संबंधित एक त्रुटि मिलेगी जहां ब्राउज़र उन्हें गलत के रूप में व्याख्या करता है माइम प्रकार।

2

glyphicons झपकी/पृष्ठ पुनः लोड पर झिलमिलाहट, लेकिन मेरे लिए बड़ा समस्या (मैं बूटस्ट्रैप 3 का उपयोग कर रहा) के रूप में तत्वों glyphicons चारों ओर आकार में परिवर्तन कर पेज flickers है। जोड़ा जा रहा है मेरी सीएसएस को यह मेरे लिए आकार बदलने बंद कर दिया:

.glyphicon { 
    width: 14px; 
    height: 14px; 
} 

धन्यवाद मेरे स्रोत रहे हैं: https://www.garysieling.com/blog/preventing-icon-flicker-using-glyphicons