Louis Lazaris demonstrates a very simple way of doing this.
- Hide the body (with JavaScript) right away with with a CSS class that declares
opacity: 0 - Wait for all the JavaScript to execute
- Unhide the body by transitioning it back to
opacity: 1
Like this:
Louis demonstrates a callback method, as well as mentioning you could wait for window.load or a DOM Ready event. I suppose you could also just have the line that sets the className to visible as the very last line of script that runs like I did above.
Louis knows it’s not particularly en vogue:
I know nowadays we’re obsessed in this industry with gaining every millisecond in page performance. But in a couple of projects that I recently overhauled, I added a subtle and clean loading mechanism that I think makes the experience nicer, even if it does ultimately slightly delay the time that the user is able to start interacting with my page.
I think of stuff like font-display: swap; which is dedicated to rendering your text as absolutely fast as possible, FOUT be damned, rather than chiller options.
Direct Link to Article — Permalink
The post Fading in a Page on Load with CSS & JavaScript appeared first on CSS-Tricks.
You can support CSS-Tricks by being an MVP Supporter.