Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Posted by Kraig Walker
Kraig Walker
4,401 Points

HTML5 Page Loading Screen

So I've just finished watching the ever-fantastic Treehouse Show #37 and after discovering Alessio Atzeni's Metrize icon set, I had to obviously have a peak around his whole site.

Visiting the homepage I was greeted by a wonderful - if understated - loading screen before the whole page displayed. This is great, as having images slowly...slowly peel down the screen revealing themselves as they load is something I've always hated, and it elevates the whole feel of the site to feel like a proper application.

I was wondering if anyone else has seen examples of page loading screens being used similar to this one, and how tricky are they to implement?

7 Answers

Spen Taylor
Spen Taylor
13,027 Points

Good point Matthew. Could just have a "loading" div element that is hidden with the window.onload possibly

Luke Ward
Luke Ward
9,154 Points
Luke Ward
Luke Ward
9,154 Points

Check out this answer on Stack Overflow - http://stackoverflow.com/questions/4580426/creating-a-loading-screen-in-html5

Matt Campbell
Matt Campbell
9,767 Points
Matt Campbell
Matt Campbell
9,767 Points

Would jquery window.onload do it? You could set an image or animation to play before while all the assets are loading.

Matt Campbell
Matt Campbell
9,767 Points
Matt Campbell
Matt Campbell
9,767 Points

That's what I'm thinking. Have the loading animation before the code window.onload so that it loads and plays the animation, and carries on playing till all the page is fully loaded.

Kraig Walker
Kraig Walker
4,401 Points
Kraig Walker
Kraig Walker
4,401 Points

Thanks guys, I think I'm gonna try the loading div technique on my own site.

Spen Taylor
Spen Taylor
13,027 Points
Spen Taylor
Spen Taylor
13,027 Points

I could be wrong here, but it might be worth considering users who have JS disabled. Wouldn't want the loading div to stay up the entire time if that was the case!

Kraig Walker
Kraig Walker
4,401 Points
Kraig Walker
Kraig Walker
4,401 Points

Mozilla Recently discussed that they would be taking such functionality out of the main Firefox preferences. Although there are some rare, extreme use cases that justify turning JS off - I don't really want to support people who feel the need to.