La interfaz de la interfaz de usuario de Jquery parece fea antes de que se complete el documento.

Question

Los elementos HTML se muestran antes que onload o document.ready se activan.

Todos los widgets de jQuery UI se cargan en document.ready y hacen que la página se vea fea durante unos primeros segundos.

Posible opción para solucionarlo: ocultar elementos antes de que sean eliminados con jQuery UI y mostrarlos con JS después de la carga. Pero en caso de que JS esté desactivado, el usuario no verá ningún elemento ni HTML estándar ni jQuery UI.

¿Cuál es la mejor práctica para trabajar con él?

Answer 1

Si nos fijamos en la documentación de jQuery UI, let's take tabs for example, si nos fijamos en la pestaña Tematización, se puede ver las clases que se aplican para evitar el destello de contenido sin estilo:

<div class="ui-tabs ui-widget ui-widget-content ui-corner-all" id="tabs"> 
    <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all"> 
    <li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active"><a href="#tabs-1">Nunc tincidunt</a></li> 
     <li class="ui-state-default ui-corner-top"><a href="#tabs-2">Proin dolor</a></li> 
    <div class="ui-tabs-panel ui-widget-content ui-corner-bottom" id="tabs-1"> 
     <p>Tab one content goes here.</p> 
    </div> 
    ... 
</div> 

Nota: Este no es la mejor práctica, pero si se quiere evitar que se muestre el contenido, que es una opción, aquí hay otro:

puede ocultar los elementos a través de CSS, dar a esos envolver <div> elementos de una clase, digamos .startsUgly que en su hoja de estilo tiene:

.startsUgly { display: none; } 

.... y mostrarlas en JavaScript, p. Ej. $(".startsUgly").show();

Luego de manejar esas JavaScript usuarios discapacitados, algunos <noscript> mágica:

<noscript> 
    <style type="text/css">.startsUgly { display: block; }</style> 
</noscript> 

esta manera, aquellos con JavaScript desactivado sencilla no consiguen el efecto display: none, todavía verá el contenido.

Answer 2

Antes que nada, las clases jQuery UI en la documentación solo se aplican después de la finalización de document.ready. Puede darles el estilo que desee, pero no se librará del destello del contenido sin estilo. Las clases son útiles para tematizar la interfaz de usuario, no para afectar la apariencia de las cosas antes de que la interfaz de usuario esté en su lugar.

En segundo lugar, la etiqueta noscript es básicamente que hay que evitar, por una gran cantidad de razones: 1) En realidad, no le diga si javascript está encendido o no. Por ejemplo, podría estar habilitado en el navegador pero bloqueado por un firewall. 2) Es una etiqueta de nivel de bloque, por lo que solo hay ciertos lugares donde puede aparecer válidamente. No es una solución de uso múltiple. 3) La etiqueta no diferencia entre los grados de implementación de javascript en diferentes sistemas.

Estuvo más cerca de las mejores prácticas en su publicación original. El truco es hacer tanto la ocultación como la presentación en javascript. Primero, modele su página para que se vea aceptable con javascript deshabilitado. Entonces, para evitar que el flash del contenido sin estilo, hacer la ocultación de los elementos feos en JavaScript antes document.ready (esta es la parte crítica) mediante la asignación de una clase al elemento html:

jQuery('html').addClass('blahblah'); 

Debido a que la El elemento html ya existe, es válido para trabajar con él antes de document.ready. Entonces, al igual que Nick dice, poner los elementos ofensivos en un div con la clase "startsugly" y luego poner una línea en el CSS que oculta los elementos ofensivos:

.blahblah .startsugly {display: none;} 

El punto aquí es que el display: none solo entra en juego cuando javascript está habilitado. Los usuarios con discapacidad aún podrán acceder a su contenido. Entonces, después de document.ready, poner en su interfaz de usuario jQuery "proxenetismo" funciones, y mostrar el elemento infractor nuevo:

$(".startsUgly").show(); 

aunque si se trata de contenido que es sólo condicionalmente visible en un acordeón o una estructura de pestaña, este último paso incluso podría ser innecesario.

Answer 3

$('[class*=" ui-"]').remove(); 

Answer 4

edificio fuera de la segunda sugerencia de Nick Craver - No tengo ninguna intención de robar su respuesta, simplemente añadiendo otra opción - que puede aprovechar la belleza de Modernizr. Modernizr agregará una clase simple js al elemento html si JavaScript está habilitado. Así que lo que puede hacer es añadir un estilo sencillo de la hoja de estilo principal como el siguiente, que sólo se oculta el cuerpo si JavaScript está activado (ya que tenemos que utilizar JavaScript más adelante para mostrar el cuerpo):

main.js body 
{ 
    display: block; 
} 

y luego tener una simple línea de código JavaScript como la siguiente en su página principal ':

<script type="text/javascript"> 
    $(function() 
    { 
     $("body").css("display", "block"); 
    } 
</script> 

es una buena solución si ya está utilizando Modernizr para otras cosas. De lo contrario, si no tienes otro uso para Modernizr, me gustaría ir con la sugerencia de Nick Craver.