# Best practice for implementing preloader for a website

**URL:** <https://forum.kirupa.com/t/best-practice-for-implementing-preloader-for-a-website/639044>\
**Category:** web dev\
**Created:** [December 3, 2018, 3:33am UTC](https://forum.kirupa.com/t/best-practice-for-implementing-preloader-for-a-website/639044 "2018-12-03T03:33:25Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![withoutwax](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/withoutwax/32/9391_2.png) [@withoutwax](https://forum.kirupa.com/u/withoutwax)\
**Post date:** [December 3, 2018, 3:33am UTC](https://forum.kirupa.com/t/best-practice-for-implementing-preloader-for-a-website/639044/1 "2018-12-03T03:33:25Z")

</div>

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:

- [fff](http://fff.cmiscm.com/#!/main) - 1. When the website first loads / 2. When each project is clicked and is being loaded
- [Google Cloud Infrastructure](https://cloud.withgoogle.com/infrastructure)

Thank you!

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [December 3, 2018, 4:17am UTC](https://forum.kirupa.com/t/best-practice-for-implementing-preloader-for-a-website/639044/2 "2018-12-03T04:17:56Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![withoutwax](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/withoutwax/32/9391_2.png) [@withoutwax](https://forum.kirupa.com/u/withoutwax)\
**Post date:** [December 3, 2018, 4:33am UTC](https://forum.kirupa.com/t/best-practice-for-implementing-preloader-for-a-website/639044/3 "2018-12-03T04:33:05Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![krilnon](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/krilnon/32/34_2.png) [@krilnon](https://forum.kirupa.com/u/krilnon)\
**Post date:** [December 3, 2018, 6:09am UTC](https://forum.kirupa.com/t/best-practice-for-implementing-preloader-for-a-website/639044/4 "2018-12-03T06:09:05Z")

</div>

> [@withoutwax](#):
>
> Oh, that’s surprising…! I thought incrementally showing the page is _less_ preferable since the website looks incomplete and lacks user experience

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/](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.

---

<div class="post-metadata">

**Author:** ![withoutwax](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/withoutwax/32/9391_2.png) [@withoutwax](https://forum.kirupa.com/u/withoutwax)\
**Post date:** [December 3, 2018, 5:07pm UTC](https://forum.kirupa.com/t/best-practice-for-implementing-preloader-for-a-website/639044/5 "2018-12-03T17:07:37Z")

</div>

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?