• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
    • Questions
    • Teachers
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

251
Views
Imagen de precarga de React en renderizado condicional

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!

almost 3 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error