jQuery ऑनलोड फ़्लिकर को अविश्वसनीय रूप से कैसे रोकें?

मैं jQuery यूआई टैब का उपयोग कर रहा हूं। मुझे यह सुनिश्चित करने के दौरान सामग्री लोड करने के झिलमिलाहट को कैसे रोकना चाहिए कि जावास्क्रिप्ट अक्षम होने पर सामग्री दिखाई दे रही है?jQuery ऑनलोड फ़्लिकर को अविश्वसनीय रूप से कैसे रोकें?

मैंने दस्तावेज़ को लोड होने पर शरीर में .js क्लास जोड़ने का प्रयास किया है, लेकिन जब टैब को जोड़ा जा रहा है, तब टैब लोड हो जाते हैं, फिर भी सामग्री की झिलमिलाहट होती है।

#container{display:none;} 

<div id="container"> 
    <div id="tabs"> 
    <ul> 
     <li><a href="#tabs-1">Nunc tincidunt</a></li> 
     <li><a href="#tabs-2">Proin dolor</a></li> 
    </ul> 
    <div id="tabs-1"> 
     <p>Tab 1</p> 
    </div> 
    <div id="tabs-2"> 
     <p>Tab 2</p> 
    </div> 
    </div> 
</div> 
<script> 
$(document).ready(function(){ 
    $('#tabs').tabs(); 
    $('#container').show(); 
}); 
</script>

स्रोत

2012-06-01 Asa Carter

यह वही है जो मैं करता हूं। अपना HTML टैग पर no-js के एक वर्ग के रख दिया और फिर बस HTML टैग के बाद निम्नलिखित कोड डालें:

<script> 
    // Sets 'js' on html element and removes 'no-js' if present (here to prevent flashing) 
    (function(){ 
     document.documentElement.className = document.documentElement.className.replace(/(^|\s)no-js(\s|$)/, '$1$2') + (' js '); 
    })(); 
</script>

इस विधि आप अपने html टैग पर अन्य वर्गों के लिए यदि आवश्यक अनुमति देता है। जेएस सक्षम नहीं होने वाले पृष्ठों के लिए अपनी शैलियों में no-js कक्षा का उपयोग करें।

शैलियों उदाहरण:

#container { 
    display:none; 
} 
.no-js #container 
{ 
    display: block; 
}

स्रोत

2012-06-01 13:07:35

सिर के अंदर या एचटीएमएल और सिर के बीच? –

जब तक कंटेनर div से पहले यह कोई फर्क नहीं पड़ता। लेकिन मैं इसे एचटीएमएल टैग (एचटीएमएल और हेड के बीच) के बाद रखूंगा –

आपके उत्तरों के लिए सभी को धन्यवाद। यह बहुत अच्छा काम करता है और एचटीएमएल टैग में अन्य कक्षाओं के लिए भी अनुमति देता है। –

<html class="nojs"> 
    ... 
    <head> 
    <script> 
     document.documentElement.className = "js"; 
    </script> 
    </head> 

    ... 
    <style> 
    #container {display:none;} 
    .nojs #container { display: block;} 
    </style>

इस अपनी सामग्री जाहिर कर देंगे तब भी जब js अपने डिवाइस पर उपलब्ध नहीं है। यह दृष्टिकोण लगभग एच 5 बीपी + मॉडर्निज़र द्वारा किया जाता है और, एक तरफ लाभ के रूप में, यह जेएस एफओयूसी (जेएस बाद में निष्पादन के कारण अस्थिर सामग्री का फ्लैश) को रोक देगा।

स्रोत

2012-06-01 13:02:21 fcalderan

मुझे लगता है कि पता नहीं था। मैं इसे अभी कोशिश कर रहा हूं :) –

+1 सुनिश्चित करें कि आप इसे जोड़ने के बजाय इसे एम्बेड करते हैं, क्योंकि बाहरी संसाधन फिर से एफओयूसी के कारण समाप्त हो जाएगा। –

गोचा। धन्यवाद। –

आप इस तरह यह कर सकते हैं:

<div id="container"> 
    <div id="tabs"> 
    <script>$('#tabs').addClass('js');</script><!-- added this line --> 
    <ul> 
     <li><a href="#tabs-1">Nunc tincidunt</a></li> 
     <li><a href="#tabs-2">Proin dolor</a></li> 
    </ul> 
    <div id="tabs-1"> 
     <p>Tab 1</p> 
    </div> 
    <div id="tabs-2"> 
     <p>Tab 2</p> 
    </div> 
    </div> 
</div> 
<script> 
$(document).ready(function(){ 
    $('#tabs').tabs().show(); // changed this line 
    $('#container').show(); 
}); 
</script>

स्रोत

2012-06-01 13:03:30

आप इसे इस तरह से कोशिश कर सकते:

<script> 
$("#container").hide(); 
$(document).ready(function(){ 
    $('#tabs').tabs(); 
    $('#container').show(); 
}); 
</script>

कंटेनर के रूप में यह भरी हुई है और जब दस्तावेज़ तैयार है और टैब से किया जाता है छिपा हुआ है , आप कंटेनर दिखा सकते हैं।

स्रोत

2012-06-01 13:07:11 nebulousGirl

ऊपर विचारों के लिए धन्यवाद लोड झिलमिलाहट पर हल करने के लिए। ब्राउज़र जितनी जल्दी हो सके मार्कअप प्रस्तुत करने का प्रयास करते हैं, इसलिए कुछ (विशाल) jquery-ui सामग्री तत्वों के लिए jquery-ui टैब के रूप में टालना चाहिए।

यह समाधान मेरे लिए काम करता है:

<html> 
... 
    <head> 
    ... 
    <script> 
     $(document).ready(function() { 
     $("#tabs_container").tabs(); 

     // force *initialized* #tab_container to be displayed 
     $("#tabs_container").show(); 
     }); 
    </script> 
    </head> 
    ... 

    <body> 
    ... 
    <!-- avoid unstyled tabs to be displayed using "display: none" at markup --> 
    <div id="tabs_container" style="display: none;"> 
     <!-- (huge) tabs content --> 
    </div> 
    ... 
    </body> 
</html>

स्रोत

2015-09-23 08:03:59 rklehm

jQuery ऑनलोड फ़्लिकर को अविश्वसनीय रूप से कैसे रोकें?

उत्तर

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