I CSS diventano effettivi dopo il rendering della pagina

Question

Sto riscontrando questo problema in cui viene caricata la pagina e dopo una frazione di secondo vengono eseguiti gli effetti CSS o lo stile.

Il problema principale che sto vedendo è con le schede JQuery che sto usando http://docs.jquery.com/UI/Tabs#source

Quando la pagina esegue il rendering, le schede mostrano una sotto l'altra per un secondo come questo:

 
One 
Two 
Three 

e quindi rendering correttamente come schede

C'è un modo rapido e semplice per risolvere questo problema. Grazie

Answer 1

Non è lo stile; è la libreria javascript dell'interfaccia jQuery, che aggiunge l'html necessario alla tua pagina in modo che le schede possano sembrare tutte simili.

Hai alcune opzioni. Innanzitutto, puoi nascondere le tue schede e visualizzarle una volta che l'interfaccia utente di jQuery ha completato la sua magia. In secondo luogo, puoi modellare le tue schede in modo che sembrino abbastanza vicine all'output finale in modo che la modifica non sia così evidente. Terzo, puoi rilasciare l'interfaccia utente di jQuery e modellare le schede solo con CSS. Tutti gli approcci validi, direi.

Spero che questo aiuti!

EDIT:

Per la prima opzione, diciamo che questo è il tuo div che contiene le schede:

<div id="tabs"> 
    ...stuff... 
</div> 

Nel foglio di stile, nascondere #tabs:

#tabs { 
    display:none; 
} 

Poi, modifica la tua chiamata dell'interfaccia utente jQuery in questo modo:

var t = $("#tabs"); 

t.tabs({ 
    create:function(){ 
     t.show(); 
    } 
}); 

Answer 2

Il codice CSS viene applicato tramite Javascript? In tal caso, puoi aggiungere del CSS statico che garantisce che gli elementi vengano almeno mostrati in orizzontale prima che il javascript venga eseguito, aggiungendo del CSS statico.

Se il browser decide di applicare il CSS dopo il rendering senza di esso, non c'è molto che tu possa fare. Potrebbe tuttavia essere che il CSS sia caricato lentamente (se si tratta di un file esterno), in questo caso, è possibile aggiungere lo stile più importante a una sezione CSS direttamente nell'HTML.

Answer 3

I browser di solito caricano i file come appaiono nel codice HTML. Assicurati di inserire prima il riferimento al file CSS in modo che venga caricato il prima possibile.

Se il CSS viene applicato utilizzando Javascript, non è possibile caricarlo più velocemente. Il file Javascript deve essere caricato prima di poter essere utilizzato.

Oltre a ciò, non penso che ci sia un modo per controllare come funziona il rendering del browser. risposta

Answer 4

di weirdlover quasi funzionato per me (utilizzando jQuery 1.5.2), ma ho dovuto associare l'evento create:

var t = $("#tabs"); 

t.tabs({ 
    create:function(){ 
     t.show(); 
    } 
}); 

Grazie!