Louis Lazaris demuestra una manera muy simple de hacer esto.
- Oculte el cuerpo (con JavaScript) de inmediato con una clase CSS que declara
opacity: 0 - Espere a que se ejecute todo el JavaScript
- Desocultar el cuerpo haciendo la transición de nuevo a
opacity: 1
Como esto:
Louis demuestra un método de devolución de llamada, además de mencionar que podría esperar window.load o un evento DOM Ready. Supongo que también podría tener la línea que establece el className a visible como la última línea de script que se ejecuta como lo hice anteriormente.
Louis sabe que no está particularmente de moda:
Sé que hoy en día estamos obsesionados en esta industria con ganar cada milisegundo en el rendimiento de la página. Pero en un par de proyectos que revisé recientemente, agregué un mecanismo de carga sutil y limpio que creo que hace que la experiencia sea más agradable, incluso si en última instancia retrasa un poco el tiempo en que el usuario puede comenzar a interactuar con mi página.
Pienso en cosas como font-display: swap; que se dedica a representar su texto lo más absolutamente rápido posible, en lugar de opciones más frías.
Enlace directo →