प्रदर्शित होने से पहले पृष्ठ लोड पर HTML तत्वों को छिपाने का सही तरीका क्या है?

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

मुझे तत्वों को कैसे छिपाएं (जावास्क्रिप्ट का उपयोग करके) ताकि वे जेएस से पहले लोड होने पर पृष्ठ को लोड करने का मौका मिलने पर संक्षेप में दिखाई न दे? मैं उन्हें सीएसएस के साथ शुरू में छिपाने के लिए सेट नहीं करना चाहता हूं जैसे कि उपयोगकर्ता के पास जावास्क्रिप्ट नहीं है, वे कुछ भी नहीं देखेंगे।

स्पष्ट होने के लिए। मैं उन उपयोगकर्ताओं को प्रदर्शित सामग्री को संभालने का तरीका नहीं पूछ रहा हूं जिनके पास जेएस नहीं है। यह एक पूरी तरह से अलग विषय है। मैं प्रदर्शित होने से पहले HTML तत्वों को छिपाने का एक विश्वसनीय तरीका चाहता हूं।

तो मेरी आवश्यकताओं:

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

स्रोत

2012-10-12 Undistraction

दो अलग-अलग मुद्दों की तरह लगता है। सबसे पहले, आप शुरुआत में तत्वों को कैसे छिपाते हैं, और दूसरी बात यह है कि यदि क्लाइंट्स में जावास्क्रिप्ट (सक्षम) नहीं है तो आप क्या करते हैं। इन प्रश्नों को न करने के लिए सावधान रहें। –

मुझे लगता है कि शायद [modernizr] (http://modernizr.com/) का उपयोग करने में मदद मिलेगी। आप अभी भी तत्वों को छिपाने के लिए सीएसएस का उपयोग कर निर्दिष्ट कर सकते हैं, इसलिए ब्राउज़र के बिना जावास्क्रिप्ट के लिए, आप उन्हें प्रदर्शित करने के लिए शैलियों को ओवरराइड करने के लिए '.no-js' कक्षा का उपयोग कर सकते हैं। लेकिन मैं प्रदर्शित होने वाले तत्वों की प्रारंभिक "चमकती" के बारे में इतना निश्चित नहीं हूं।ऐसा करने के साथ कोड कैसे संरचित किया जाता है और वेब ब्राउज़र कैसे पार्स करते हैं और उन्हें प्रदर्शित करते हैं। – VKen

@ एरिक फिलिप्स। मैं केवल उस स्टाइल का उल्लेख करता हूं जैसे 'तत्वों को प्रदर्शित करने के लिए सेट करें: अपनी स्टाइलशीट में छुपाएं'। – Undistraction

तरह VKen के साथ उन लोगों के लिए प्रारंभिक सीएसएस के ऊपर लिख सकता है, मैं का उपयोग करना पसंद moderizr और Paul Irish's structure for the html element (जो क्या HTML5 Boilerplate का उपयोग करता है)

<!DOCTYPE html> 
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--> 
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]--> 
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]--> 
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->

फिर स्टाइल शीट में:

.element-to-hide { display: none; } 

.no-js .element-to-hide { display: block; }

महान काम करता है, तत्वों का कोई फ़्लैश गायब नहीं होता है।

स्रोत

2012-10-12 16:54:33 steveax

एक समाधान जावास्क्रिप्ट का उपयोग वैकल्पिक सीएसएस फ़ाइल को शामिल करने के लिए करना है जिसमें आप उन divs को छुपाते हैं।

अपने HEAD अनुभाग में इस रखो:

<script>document.write('<link rel="stylesheet" type="text/css" href="hiding.css"/>');</script>

और hiding.css में:

div.mySelector { 
    display:none; 
}

आप स्थापित करने के लिए अतिरिक्त सीएसएस की जरूरत नहीं है, तो आप भी अधिक बस सीएसएस इनलाइन सकता है जावास्क्रिप्ट में नियम (अभी भी HEAD में):

<script> 
document.write('<style type="text/css">div.mySelector {display:none; }</style>'); 
</script>

यदि जावास्क्रिप्ट उपलब्ध नहीं है, तो div एस छुपा नहीं जाएगा। और यदि यह उपलब्ध है, तो सीएसएस को प्रदर्शित होने से पहले div को छिपाने के लिए उपयोग किया जाएगा।

स्रोत

2012-10-12 16:44:39

धन्यवाद। इस दृष्टिकोण के लिए ब्राउज़र समर्थन क्या है? – Undistraction

मैं सभी आधुनिक ब्राउज़रों में जावास्क्रिप्ट में सीएसएस लिंक पीढ़ी का उपयोग करता हूं और मुझे नहीं लगता कि पुराने लोगों में असंगतता क्यों होगी। –

एक वंशज संयोजन का उपयोग करें और शरीर को जितनी जल्दी हो सके कक्षा का सदस्य बना दें।

<style> 
    /* js only element */ 
    .js foo { display: none; } 
</style> 
</head> 
<body> 
<script> document.body.className += " js"; </script>

स्रोत

2012-10-12 16:44:49 Quentin

धन्यवाद। लेकिन क्या यह जेएस पृष्ठ प्रस्तुत करने से पहले चलाने की गारंटी है? – Undistraction

यह वास्तव में मेरी पसंदीदा विधि है। यह तुरंत चला जाता है, क्योंकि यह किसी पुस्तकालय को लोड करने पर निर्भर नहीं है और यह सबसे सरल समाधानों में से एक है। मैंने इस विधि का उपयोग कभी भी मुद्दों का अनुभव नहीं किया है। –

आप एक <noscript> टैग करते हैं और जावास्क्रिप्ट विकलांग

स्रोत

2012-10-12 16:45:31 user733421

प्रदर्शित होने से पहले पृष्ठ लोड पर HTML तत्वों को छिपाने का सही तरीका क्या है?

उत्तर

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