Desvanecimiento en una página al cargar con CSS y JavaScript

Louis Lazaris demuestra una manera muy sencilla de hacer esto.

1. Oculte el cuerpo (con JavaScript) de inmediato con una clase CSS que declareopacity: 0
2. Espere a que se ejecute todo el JavaScript
3. Mostrar el cuerpo volviéndolo a hacer la transición aopacity: 1

Como esto:

Louis demuestra un método de devolución de llamada, además de mencionar que puede esperar window.loadun evento DOM Ready. Supongo que también podrías tener la línea que establece classNamecomo visiblela última línea del 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 finalmente retrasa ligeramente el momento en que el usuario puede comenzar a interactuar con mi página.

Pienso en cosas como font-display: swap;las que se dedican a renderizar el texto lo más rápido posible, maldita sea, en lugar de opciones más frías .