I am seeking advice on how to control the loading sequence of elements in my website. The issue I am facing involves a curtain effect (a <div> with a background-image) overlaying my site, which triggers an animation function to remove it once the page has loaded. However, some elements load faster than the background image, causing them to be visible behind the curtain upon entering the site.
The structure of my markup is as follows:
<body>
<div id="curtain"></div>
<!-- followed by other elements -->
</body>
Despite placing the curtain div at the beginning of the body, it does not solve the problem.
How can I ensure that #curtain loads first before any other elements, preventing them from being displayed prematurely?
Thank you