Web Page Load Waiting Time Hack! Boost Your Brand with a Logo Display Technique

When visiting a website, if the page takes time to load, there is a higher chance that users may leave the site. However, if this waiting time is used effectively to display a company’s logo or brand image, it can leave a strong impression on visitors and help increase brand recognition.

In this article, we will explain how to display a logo image in the center of the screen until all resources on the web page are fully loaded, and then show the actual page afterward. We will walk through the method with concrete examples using HTML, CSS, and JavaScript code.

Benefits

• Improved User Experience:
  By displaying a logo during loading, users do not feel that the page is simply idle, and instead receive the brand’s visual impression.
• Increased Brand Awareness:
  Using a logo and brand colors makes the brand easier to remember, helping improve recognition among visitors.
• Building Technical Trust:
  Smooth page transitions and well-designed loading screens can enhance the perceived technical reliability of the website.

Code Explanation and Implementation

HTML Code

In this code, the logo image is placed inside the #loading element, and the page content is placed inside the #content element.

<div id="loading">
    <img src="https://dad-union.com/wp-content/uploads/2023/06/logo2.jpg" alt="Logo Image">
</div>
<div id="content" style="display: none;">
  <!-- Place the web page content here -->
  <h1>A logo is displayed while waiting for the web page to load</h1>
  <!-- End of content -->
</div>

CSS Code

The CSS transition property is used to make the content appear smoothly.

<style>
body {
    font-size: 16px;
    text-align: center;
    margin: 0;
}
h1{
    text-align: center;
    font-size: 20px;
    padding: 40px 0;
    line-height: 1.8em;
}
#loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    text-align: center;
}
#loading img{
  width: 200px;
  margin: 0 auto;
}
#content {
    opacity: 0;
    transition: opacity 0.5s ease;
}
</style>

JavaScript Code

Using JavaScript’s addEventListener with load, once all page resources are loaded, the #loading element is hidden and the #content element is displayed.

<script>
window.addEventListener('load', function() {
    document.getElementById('content').style.display = 'block';
    setTimeout(function() {
        document.getElementById('content').style.opacity = 1;
        document.getElementById('loading').style.display = 'none';
    }, 1200); // Change opacity after a short delay
});
</script>

Demo Page Showing a Logo During Web Page Loading

You can check the implementation described above on the following demo page.

Demo page showing a logo during web page loading

Important Notes

• Logo Image Optimization:
  It is important to keep the logo image as lightweight as possible. If the image file is too large, the loading screen itself may take longer to appear, which defeats the purpose.
• Ensuring Accessibility:
  If the loading screen remains visible for too long, users with visual impairments may find it difficult to understand the page’s loading status. It is important to hide the loading screen at an appropriate time.
• Browser Compatibility:
  Make sure that the CSS properties and JavaScript features used are supported across all browsers. If necessary, consider using polyfills or alternative methods.

Summary

Displaying a logo image while a web page is loading is an effective way to improve user experience and increase brand awareness.
By properly combining HTML, CSS, and JavaScript, you can implement a smooth and impressive loading screen.
Keeping the important points in mind, why not try incorporating this technique into your own website?

　
※If you reuse this code, please do so at your own responsibility.
Please do not reuse the Google Analytics tag included in the demo page’s head tag.