Fix for background images not loading until rendered on screen? [closed]

I'm building a (mostly static) SPA that has a lot of animations and transitions between views (it's a kiosk).


It's working great except...the very first time it runs. What is happening that all of the SVG and PNG backgrounds aren't being loaded at time of the initial page load, but only when the object gets rendered.


Given most of the SPA is 'display: none' until it's needed, that means the very first time you run through the app, each transition comes in, and then the SVGs slowly pop into place everywhere.


After that, since they are now cached, it's fine. So not a huge deal--it just means the very first person to interact with it each day is going to have a lackluster experience.


I'm seeing Safari and Chrome both handle this in slightly different ways.


Viewing the network tabs in dev tools, I see the following behavior:




*

Safari: Immediately requests all images being used (which makes sense) but only fully loads the ones immediately being displayed. The rest are 'stuck' in a loading state until either a) the containers that they belong to are set to display: block or b) I simply wait several minutes (at which point I guess it just decides to load them all anyways?)


*

Chrome: Immediately requests only the images needed. The rest aren't even requested until they need to be rendered on screen.






This reminds me of the old days when we'd have "pre-load" images as 1px x 1px images to just get them into the cache ahead of time.


So that's what I'm doing. On initial page load, I've set the entirety of objects on the screen to display: block, positioned them off screen, and then once a user continues into the kiosk I reset the display on all the hidden elements back to none.


This works, but feels clunky. Is there a more elegant way to go about this? Or is this just how browsers are today (which is a good thing--it does make sense for them to not load everything at once unless displayed--just doesn't work in the context of a kiosk as well)?


EDIT 1:


Hmm...StackOverflow is asking for sample code. Not really much to it. We're talking about plain ol' backgroundimages:




div {
width: 200px;
height: 200px;
background: url('
https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg') /> }






As for the tech stack, this is pretty much just JS/CSS/HTML. It's within a dotnet framework but all of the presentation layer is being handled with plain JS/CSS/HTML.


Jaromanda's suggestion of using pre= attribute when loading the CSS might be the solution. Will give that a try!