1

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!

Drew Reese
  • 165,259
  • 14
  • 153
  • 181
Evan
  • 1,892
  • 2
  • 19
  • 40
  • The paths to the images are they absolute or relative? – Nicholas Mberev Feb 09 '22 at 22:30
  • I don't really understand what you mean by "preload" the images, they are already imported assets. Sounds like you are saying you are having rendering issues. Can you describe in a bit more detail what the issue is? – Drew Reese Feb 09 '22 at 22:33
  • @NicholasMberev they are relative/inside the directory – Evan Feb 09 '22 at 22:41
  • @DrewReese when the conditional statement triggers and the image loads for the first time there is a rendering issue where they take like a half second to load/appear a little glitchy. I would like to somehow avoid this rendering issue if possible and I thought this might be due to the fact that react only loads the image on render, so if I could load before the render I thought that might speed things up. – Evan Feb 09 '22 at 22:42
  • 1
    You could render them and conditionally hide them until you are ready to show them, i.e. apply CSS. – Drew Reese Feb 09 '22 at 22:44
  • ah yes thank you I was debating that -- would something like display:none actually render the image though? Or should this be more of a z-stack thing, where the image is rendered and just hidden behind everything else? – Evan Feb 09 '22 at 22:47
  • 1
    `display: none;` may work. Another option might be to position it off-screen and apply a class to move it into the viewport. There's probably several methods to accomplish this effect. – Drew Reese Feb 09 '22 at 22:54
  • got it, that should solve my problem. thanks so much for the help! – Evan Feb 09 '22 at 22:55
  • @Evan please have a look at this https://stackoverflow.com/questions/2342132/waiting-for-image-to-load-in-javascript is that what you are looking for? if true, you could use reference hook to add the src in useEffect. – Nicholas Mberev Feb 09 '22 at 23:04

0 Answers0