He visto algunas preguntas similares aquí, pero ninguna de ellas parece abordar el problema de precargar una imagen que se procesa condicionalmente. Como ejemplo reproducible mínimo, tengo un código que es algo como lo siguiente:

 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;

Básicamente, tengo una pantalla de inicio que inicialmente muestra y muestra algunas cosas. Luego, la pantalla de inicio desaparece y renderizo las dos imágenes, imageOne e imageTwo.

Hago algunas animaciones bastante complejas con imageOne e imageTwo, por lo que me gustaría que se carguen de la mejor manera posible. Sin embargo, debido a la naturaleza condicional de su procesamiento, parece que las imágenes solo se cargan cuando se procesan, lo que provoca un pequeño retraso.

¿Hay alguna manera de que pueda cargar estas imágenes mientras se muestra la pantalla de inicio para que, cuando cambie mi lógica condicional, aparezcan instantáneamente, sin demora?

Por lo que puedo decir, parece que React hace una especie de "carga diferida" que solo carga la imagen cuando se muestra, pero me gustaría desactivar eso aquí.

Espero que esta pregunta sea clara, ¡gracias!