Yes, you can hide the preloader once the main content is partially rendered on the screen instead of waiting for the entire page to load. Here's how you can modify the code to achieve that:
<div class="preloader">
<img id="loader" height="50px" width="50px" src="{{ 'preloader.gif' | asset_url }}" alt="Preloader">
</div>
<style>
.preloader {
pointer-events: none;
cursor: default;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background-color: #fff;
z-index: 9999;
display: flex;
justify-content: center;
align-items: center;
}
#loader {
position: absolute;
width: 100px;
height: 100px;
z-index: 999;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
var preloader = document.querySelector('.preloader');
preloader.style.display = 'none';
});
</script>
Here are the changes made:
1. Changed the position property of the .preloader class to fixed instead of relative. This ensures that the preloader covers the entire viewport regardless of the page's scroll position.
2. Changed the event listener from window.addEventListener('load', ...) to document.addEventListener('DOMContentLoaded', ...). The DOMContentLoaded event fires when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading. This means the preloader will be hidden as soon as the main content is ready, even if some resources are still loading.
With these modifications, the preloader will be displayed until the main content is loaded and parsed, and then it will be hidden, allowing the user to see the partially rendered content while the remaining resources continue to load in the background.
Keep in mind that the exact timing of when the preloader is hidden may vary depending on the complexity and size of your page's content. If you have a lot of content that needs to be loaded and parsed, there might still be a slight delay before the preloader is hidden.
However, this approach should generally provide a faster perceived loading experience compared to waiting for the entire page to load.
Was this helpful? Like or Accept solution - Buy me a coffee ☕️
- Contact me: Xipirons | WhatsApp
- Shopify Developer based in France, helping online merchants succeed
