Best practice for implementing preloader for a website

programming web dev
1

Hey everyone!
I was wondering what is the best practice for implementing preloader when the website freshly loads for the first time!
I realized that there are many different types of method in doing this, but I was just wondering what is the best practice for this type of functionality.
Here’s few examples that I found which seems to have really nice preloader:

Thank you!

2

I would argue the best practice is to not have a preloader at all. Incrementally showing the page is preferable to showing a preloader. If you really don’t have all the data yet, then the placeholder UI you see in Facebook (for example, with the grayed out content blocks) is a decent middle state.

1 Like
3

Oh, that’s surprising…! I thought incrementally showing the page is less preferable since the website looks incomplete and lacks user experience (perhaps, I did not have any of those grayed out content blocks to indicate that there’s going to be contents loading).

Do you mind if I ask you how the implementation of grayed out content blocks works? Would it be safe to assume to use some kind of eventlistener for this kind of functionality?

Also, I know you’ve recommended not using preloader at all, but just for the sake of curiosity and interest in knowledge, would using a preloader involved using a eventlistener in JavaScript as well?

Thank you!

4

I think the idea is that if you need a preloader UI, the launch experience is already compromised.

https://developer.apple.com/design/human-interface-guidelines/ios/icons-and-images/launch-screen/

A launch screen appears instantly when your app starts up. The launch screen is quickly replaced with the first screen of your app, giving the impression that your app is fast and responsive. The launch screen isn’t an opportunity for artistic expression. It’s solely intended to enhance the perception of your app as quick to launch and immediately ready for use.

5

Thanks for this!
So would it be safe to assume to have a preloader as loading a basic CSS to a webpage (launch screen or grayed out content blocks) before the real content is loaded?