Louis Lazaris demonstrates a very simple way of doing this.
- Hide the body (with JavaScript) right away with
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.
About us and this blog
We are a digital marketing company with a focus on helping our customers achieve great results across several key areas.
Request a free quote
We offer professional SEO services that help websites increase their organic search score drastically in order to compete for the highest rankings even when it comes to highly competitive keywords.
Subscribe to our newsletter!
More from our blog
See all postsRecent Posts
- How to Create Beautiful Coming Soon Pages in WordPress with SeedProd February 27, 2021
- Weekly Platform News: Reduced Motion, CORS, WhiteHouse.gov, popups, and 100vw February 27, 2021
- A definitive guide to streams February 27, 2021