Currently, I am facing an issue with background images loading visibly as the user navigates through different divs on my page. My goal is to provide a seamless user experience by preloading these images before the user interacts with the app. Despite using methods like javascript's new Image().src = URL
and HTML/CSS
<link rel="preload" href="./assets/img/inputs.jpg" as="image">
, I have not been successful in achieving this. The first div is visible upon page load, while the others remain hidden under overflow. How can I ensure that all background images are loaded into memory beforehand for smoother performance? Any suggestions would be greatly appreciated as I aim to enhance the overall user experience of the web application with an elegant solution.
Thank you, Brett