Cómo evitar que la carga de jQuery parpadee discretamente?

Estoy usando jQuery UI Tabs. ¿Cómo debo evitar el parpadeo de la carga de contenido mientras también me aseguro de que el contenido esté visible cuando Javascript está desactivado?Cómo evitar que la carga de jQuery parpadee discretamente?

He intentado agregar una clase .js al cuerpo cuando el documento está cargado pero como las pestañas se cargan al mismo tiempo que la clase que se está agregando, todavía hay un parpadeo de contenido.

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

Fuente

2012-06-01 Asa Carter

esto es lo que hago. poner una clase de no-js en su etiqueta html y luego poner el siguiente código justo después de la etiqueta 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>

Este método le permite tener otras clases en su etiqueta html si es necesario. Use la clase no-js en sus estilos para páginas que no tienen habilitado js.

estilos ejemplo:

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

Fuente

2012-06-01 13:07:35

dentro de la cabeza o entre html y cabeza? –

, siempre y cuando sea anterior al contenedor div no importa. Pero lo pondría justo después de la etiqueta html (entre html y head) –

Gracias a todos por sus respuestas. Esto funciona muy bien y también permite otras clases en la etiqueta html si fuera necesario. –

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

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

Esto hará que su contenido visible incluso cuando js no está disponible en su dispositivo. Este enfoque es casi el mismo realizado por H5BP + Modernizr y, como beneficio adicional, evitará el JS FOUC (flash de contenido sin estilo debido a la posterior ejecución de js).

Fuente

2012-06-01 13:02:21 fcalderan

yo no lo sabía. Voy a intentarlo ahora :) –

+1 Asegúrese de incrustarlo, en lugar de vincularlo ya que el recurso externo volverá a causar el FOUC. –

Gotcha. Gracias. –

Puede hacerlo de esta manera:

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

Fuente

2012-06-01 13:03:30

usted podría tratar de esta manera:

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

El contenedor se oculta, ya que se carga y cuando el documento está listo y se hacen fichas , puedes mostrar el contenedor.

Fuente

2012-06-01 13:07:11 nebulousGirl

Gracias por las ideas anteriores para resolver el parpadeo de carga. Como los navegadores intentan representar el marcado tan pronto como sea posible, esto debería evitarse con algunos (grandes) elementos de contenido de jquery-ui como las pestañas jquery-ui.

Esta solución funciona para mí:

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

Fuente

2015-09-23 08:03:59 rklehm

Cómo evitar que la carga de jQuery parpadee discretamente?

Respuesta

Cuestiones relacionadas