¿Cómo evitar que la carga de jQuery parpadee discretamente?
tabs load (5)
Gracias por las ideas anteriores para resolver el parpadeo de carga. Como los navegadores intentan representar el marcado lo antes posible, esto debe 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>
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?
Intenté agregar una clase .js al cuerpo cuando se carga el documento, pero como las pestañas se cargan al mismo tiempo que la clase que se agrega, 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>
Puedes hacerlo así:
<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>
Puedes intentarlo de esta manera:
<script>
$("#container").hide();
$(document).ready(function(){
$(''#tabs'').tabs();
$(''#container'').show();
});
</script>
El contenedor está oculto mientras se carga y cuando el documento está listo y las pestañas están listas, puede mostrar el contenedor.
esto es lo que hago. pon una clase de no-js en tu etiqueta html y luego coloca 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 las páginas que no tienen habilitado js.
ejemplo de estilos:
#container {
display:none;
}
.no-js #container
{
display: block;
}
<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 sea 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).