How To Create Placeholder While Loading Like Facebook

Have you ever wondered how some websites like Facebook display those smart placeholder images while content is still loading? It's like a little sneak peek of what’s coming next before the entire page fully loads. Implementing this feature in your web development can enhance user experience and make your site look more professional. In this article, we'll walk you through the process of creating a placeholder while loading, just like Facebook does.

To achieve this effect, we will use a combination of HTML, CSS, and a sprinkle of JavaScript. Let's get started by writing the basic HTML structure for our page.

<div class="loader"></div>
  <div class="content hidden">
    <!-- Your main content goes here -->
  </div>

In the code snippet above, we have a container for our loader and another for the main content. The 'loader' class will be responsible for displaying the placeholder, while the 'hidden' class will initially hide the main content until it’s fully loaded.

Now, let’s move on to the CSS file (styles.css) to style our loader and content:

.loader {
  width: 100%;
  height: 300px; /* Set the height as needed */
  background: lightgray;
}

.hidden {
  display: none;
}

Here, we've set a light gray background for the loader element to serve as a placeholder. You can customize the height and background color to match your design preferences. The 'hidden' class ensures that the main content remains hidden until it's ready to be displayed.

Next, let’s add some logic to our JavaScript file (script.js) to show the main content once the page has finished loading:

document.addEventListener("DOMContentLoaded", function() {
  // Simulate a delay to showcase the effect
  setTimeout(function() {
    document.querySelector(".loader").style.display = "none";
    document.querySelector(".content").classList.remove("hidden");
  }, 2000); // Adjust the delay time as needed
});

In the JavaScript code snippet above, we're using the `DOMContentLoaded` event listener to wait for the page to load completely. We then use a timeout function to simulate a loading delay before hiding the loader and revealing the main content by removing the 'hidden' class.

You can adjust the delay time to suit your needs, depending on the complexity of your content or any additional resources that need to be loaded.

And there you have it! By following these simple steps and customizing the styles to fit your website's design, you can create a smooth loading experience with placeholders just like Facebook. Enhancing user experience with small details like this can make a big difference in how your website is perceived.