Wie verhindert man jQuery onload Flicker unauffällig?

Ich verwende jQuery UI Tabs. Wie kann ich das Flackern beim Laden von Inhalten verhindern und gleichzeitig sicherstellen, dass der Inhalt sichtbar ist, wenn JavaScript deaktiviert ist?Wie verhindert man jQuery onload Flicker unauffällig?

Ich habe versucht, eine .js Klasse zum Körper hinzuzufügen, wenn das Dokument geladen wird, aber da die Registerkarten gleichzeitig mit der hinzugefügten Klasse geladen werden, gibt es immer noch das Flackern des Inhalts.

#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>

Quelle

2012-06-01 Asa Carter

das ist was ich mache. stellt eine Klasse von no-js auf dem HTML-Tag und setzen Sie dann den folgenden Code direkt nach dem HTML-Tag:

<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>

diese Methode können Sie andere Klassen auf Ihrem html Tag haben kann, falls erforderlich. Verwenden Sie in Ihren Styles die no-js-Klasse für Seiten, für die js nicht aktiviert ist. Beispiel

Stile:

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

Quelle

2012-06-01 13:07:35

im Kopf oder zwischen HTML und Kopf? –

Solange es vor dem Container div ist ist es egal. Aber ich würde es direkt nach dem HTML-Tag (zwischen HTML und Kopf) setzen –

Vielen Dank für Ihre Antworten. Das funktioniert gut und erlaubt auch andere Klassen im HTML-Tag, falls sie benötigt werden. –

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

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

dies Ihre Inhalte sichtbar, auch, wenn js auf Ihrem Gerät nicht verfügbar ist. Dieser Ansatz wird von H5BP + Modernizr fast genauso durchgeführt und dient als Nebeneffekt der Verhinderung des JS FOUC (Flash of unstyled content aufgrund der späteren Ausführung von js).

Quelle

2012-06-01 13:02:21 fcalderan

ich nicht, dass nicht kannte. Ich werde es jetzt versuchen :) –

+1 Stellen Sie sicher, dass Sie es einbetten, anstatt es zu verknüpfen, da die externe Ressource wieder den FOUC verursacht. –

Gotcha. Vielen Dank. –

Sie können es wie folgt tun:

<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>

Quelle

2012-06-01 13:03:30

Man könnte es auf diese Weise versuchen:

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

Der Behälter ist, wie es versteckt wird geladen und wenn das Dokument fertig ist und Tabs sind fertig , können Sie den Behälter zeigen.

Quelle

2012-06-01 13:07:11 nebulousGirl

Dank für über Ideen zur Lösung des auf Last flackern. Da Browser versuchen, Markup so schnell wie möglich zu rendern, sollte dies für einige (große) jquery-ui Inhaltselemente wie jquery-ui Tabs vermieden werden.

Diese Lösung funktioniert für mich:

<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>

Quelle

2015-09-23 08:03:59 rklehm

Wie verhindert man jQuery onload Flicker unauffällig?

Antwort

Verwandte Themen