Whenever I visit my webpage, I notice that the content starts loading without the animation applied to it. It seems like the CSS hasn't finished downloading yet. To solve this issue, I added a preloading bar overlay to signal that the content is still loading. However, even with the overlay in place, the webpage loads in the middle of the screen without the animation while the overlay loader continues to work.
In the end, the content loads without displaying the desired animation.
I discovered that there is a window.stop() method that can completely halt rendering, but unfortunately, there is no window.load() method available.
{...heading...}
<script src="mainPage/js/loading.js"></script> <!-- loading bar calculation to perform -->
</head>
<body>
<div id="overlay">
<div id="progstat"></div>
<div id="progress"></div>
</div>
<script src="mainPage/node_modules/aos/dist/aos.js"></script> <!-- web content animation script so that it loads as soon as possible -->
{..body..}
The content of the loading.js file is taken from this Stack Overflow question. Any suggestions on how to fix this? Thank you for your help in advance.
EDIT 1:
You might want to consider implementing Progressive image loading. Check out this discussion on Stack Overflow. The suggested solutions in the answers could also be helpful.