I've seen a few similar questions here but none of them seem to address the issue of pre-loading an image that is conditionally rendered. As a minimal reproducible example, I have code that is something like the following:

import { useEffect, useState } from 'react';
import SplashScreen from './components/SplashScreen/SplashScreen';
import imageOne from './images/circleOne.png'
import imageTwo from './images/circleTwo.png'
import './App.css';

function App() {

  const [showingSplashScreen, setShowingSplashScreen] = useState(true)

  if (showingSplashScreen) {
    return (
      <div className="App dark-background container-fluid">
        <SplashScreen setShowingSplashScreen={setShowingSplashScreen}>
        </SplashScreen>
      </div>
    );
  } else {
    return (
      {/* I want to preload these */}
      <div className="App container-fluid">
         <img src = {imageOne} />
         <img src = {imageTwo} />
      </div>
    )
  }
}

export default App;

Basically, I have a splash screen that initially renders and shows some stuff. Then, the splash screen goes away and I render the two images, imageOne and imageTwo.

I do some pretty complex animations with imageOne and imageTwo so I would like these to load as seamlessly as possible. However, due to the conditional nature of their rendering, it seems like the images only load when they are rendered, which causes a small lag.

Is there a way that I can load these images while the splash screen is showing so that by the time I switch my conditional logic, they will just show up instantly, without any delay?

From what I can tell, it seems like React does a sort of "lazy-loading" which only loads the image when it is displayed, but I would like to disable that here.

I hope this question is clear, thank you!