CSS surte efecto después de que la página haya procesado

Question

Me encuentro con este problema donde se carga mi página y luego, después de una fracción de segundo, se producen los efectos de CSS o el diseño.

El principal problema que veo es con las lengüetas de JQuery que estoy usando http://docs.jquery.com/UI/Tabs#source

Cuando la página se representa, las pestañas muestran una debajo de la otra por un segundo como esto:

 
One 
Two 
Three 

y luego renderizar correctamente como pestañas

¿Existe una manera rápida y fácil de arreglar esto. Gracias

Answer 1

No es el estilo; es la biblioteca jQuery UI javascript, que agrega el html necesario a tu página para que las pestañas se vean bonitas.

Tiene algunas opciones. En primer lugar, puede ocultar sus pestañas y mostrarlas una vez que jQuery UI haya completado su magia. En segundo lugar, puede diseñar sus pestañas para que se vean lo suficientemente cerca de la salida final para que el cambio no sea tan notable. En tercer lugar, puede eliminar la interfaz de usuario de jQuery y personalizar las pestañas solo con CSS. Todos los enfoques válidos, diría yo.

Espero que esto ayude!

EDIT:

Para la primera opción, digamos que esta es su div que contiene las fichas:

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

En su hoja de estilo, oculte #tabs:

#tabs { 
    display:none; 
} 

Entonces, modifique su jQuery UI call como lo siguiente:

var t = $("#tabs"); 

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

Answer 2

¿Se aplica el CSS a través de Javascript? En ese caso, puede agregar un CSS estático que asegure que los elementos se muestren al menos horizontalmente antes de que se ejecute javascript, agregando un CSS estático.

Si es el caso de que el navegador simplemente decida aplicar el CSS después de renderizar sin él, no hay mucho que pueda hacer. Sin embargo, podría ser que el CSS se cargue lentamente (si es un archivo externo), en este caso, podría agregar el estilo más importante a una sección CSS directamente en el HTML.

Answer 3

Los navegadores generalmente cargan los archivos tal como aparecen en su código HTML. Asegúrese de poner primero la referencia a su archivo CSS para que se cargue lo antes posible.

Si el CSS se aplica con Javascript, no es posible hacerlo cargar más rápido. El archivo Javascript debe cargarse antes de que pueda ser utilizado.

Aparte de eso, no creo que haya una manera de controlar cómo funciona el procesamiento del navegador. respuesta

Answer 4

de weirdlover casi trabajado para mí (con jQuery 1.5.2), pero tenía que enganchar el create evento:

var t = $("#tabs"); 

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

Gracias!