Come evitare lo sfarfallio di caricamento jQuery discretamente?

Sto utilizzando le schede dell'interfaccia utente di jQuery. Come dovrei evitare lo sfarfallio del caricamento dei contenuti assicurandoti anche che il contenuto sia visibile quando javascript è disabilitato?Come evitare lo sfarfallio di caricamento jQuery discretamente?

Ho provato ad aggiungere una classe .js al corpo quando il documento è caricato, ma poiché le schede vengono caricate contemporaneamente alla classe aggiunta, c'è ancora lo sfarfallio del contenuto.

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

fonte

2012-06-01 Asa Carter

questo è quello che faccio. mettere una classe di no-js sul tag html e quindi inserire il seguente codice subito dopo il tag 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>

Questo metodo consente di avere altre classi sul tag html, se necessario. Utilizzare la classe no-js nei propri stili per le pagine che non hanno js abilitato.

stili esempio:

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

fonte

2012-06-01 13:07:35

all'interno della testa o tra html e testa? –

finché è prima del contenitore div non importa. Ma lo metterei subito dopo il tag html (tra html e head) –

Grazie a tutti per le vostre risposte. Funziona alla grande e consente anche ad altre classi nel tag html se necessario. –

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

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

Questo renderà il vostro contenuto visibile anche quando js non è disponibile sul dispositivo. Questo approccio è quasi lo stesso eseguito da H5BP + Modernizr e, come vantaggio a parte, impedirà il JS FOUC (flash di contenuti non programmati a causa dell'esecuzione successiva di js).

fonte

2012-06-01 13:02:21 fcalderan

io non lo sapevo. Ora lo proverò :) –

+1 Assicurati di averlo incorporato piuttosto che collegarlo poiché la risorsa esterna finirà di causare il FOUC. –

Gotcha. Grazie. –

Si può fare in questo modo:

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

fonte

2012-06-01 13:03:30

si potrebbe provare in questo modo:

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

Il contenitore è nascosto in quanto viene caricato e quando il documento è pronto e sono fatto le schede , puoi mostrare il contenitore.

fonte

2012-06-01 13:07:11 nebulousGirl

Grazie per idee di cui sopra per risolvere il su carico sfarfallio. Mentre i browser tentano di eseguire il rendering del markup il prima possibile, questo dovrebbe essere evitato per alcuni (enormi) elementi del contenuto di jquery-ui come schede jquery-ui.

Questa soluzione funziona per me:

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

fonte

2015-09-23 08:03:59 rklehm

Come evitare lo sfarfallio di caricamento jQuery discretamente?

risposta

Problemi correlati