Pregunta

Estoy usando una mejora progresiva para construir un sitio web. Esto incluye menú, presentación de diapositivas, etc. Los elementos se incluyen en la página como listas desordenadas, luego JavaScript aplica el formato.

Mi preocupación: ¿Cómo puedo evitar el flash de contenido sin formato, donde las listas desordenadas son visibles antes de aplicar el formato? ¿Hay mejores prácticas para esto?

IMPORTANTE: El sitio debe seguir siendo amigable con SEO y accesible (es por eso que estoy usando una mejora progresiva en primer lugar). Entonces, por ejemplo, está fuera de cuestión establecer el estilo inicial de las listas desordenadas para mostrar: Ninguna.

¿Fue útil?

Solución

Entonces, por ejemplo, está fuera de cuestión establecer el estilo inicial de las listas desordenadas para mostrar: Ninguna.

Puede indirectamente hacer que el estilo se ajuste a display: none Cuando detectas que JavaScript está disponible usando CSS y se ejecuta algún script antes de que se incluya cualquier contenido:

<head>
    <style type="text/css">
        body.withjs #menu { display: none; }
    </style>
</head>
<body>
    <script type="text/javascript">
        document.body.className= 'withjs';
        window.onload= function() {
            ...do stuff with menu...
            document.getElementById('menu').style.display= 'block';
        };
    </script>
    ...
    <ul id="menu">
        ...
    </ul>
</body>

Otros consejos

Use CSS para formatear en lugar de JavaScript.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top