Animated Image while loading?

Hey guys. I have 2 questions and they’re kindof related.

1: I want to have a little animation play while the page loads but I don’t quite understand how.

In React I use componentDidMount lifecycle, have it show the animation div, then remove or replace it to show the regular page?

2: Most of my images are in CSS files, and load based on which button the user presses. But I’m noticing the images load after the user presses the button, and sometimes it takes a second or two.

I’m wondering if there’s a way to preload these images into the browser’s memory so when they click the button there is no delay? It’s not necessary to load all the images right off the bat, but maybe after the page loads?

(Altogether it’s ~7mb of images, so I don’t think it would strain the browser too much to load images that might not be accessed.)

for question 1, typically I use conditional rendering, one way is to set the state with a boolean flag after making sure the page has loaded

class myComponent extends React.Component{
  constructor(props){
    super(props)
    this.state={hasLoaded: false}
  }
  componentDidMount(){
    // do work to fetch From Api or gather info that the page needs and then 
    this.setState({hasLoaded: true})
  }
 
  render(){
   //
    if(!this.state.hasLoaded) return <div className="myanimation"/>;

    return <div className="myregularpage"/>
  }
}

Not sure about #2 , hopefully somebody more knowledgeable will step in

1 Like

How many images? That is a lot to download. Can you shrink them any without sacrificing the quality?

1 Like

@Dereje1: Does this only work if there is an API call? Maybe inside componentDidMount I could set a short 2-3 second timer, play the animation until the timer’s done, then change the state to “hasLoaded: true”.

@RandellDawson There’s about 21 images. I guess you could call it an image gallery, so I don’t want to reduce quality or size.

When I go to the network tab it shows each new image loading when I hit the button that calls it. There’s a specific order that images will load; 41, then 42, then 43, etc. Can I queue up the next image to load that way? So it wouldn’t necessarily load all 7mb, it would only advance load the next image (300kb) before it’s called?

@adam-weiler, yes, it can be, I just used that as an example because the asynchronous request people are usually waiting for is an api call, but you can simulate it with a set timeout as you suggested as well, here is a simple code pen that does that by displaying a loading wheel for 3 secs on load.

I would also note that there is an alternative, if the div’s or elements contain similar things, then you could also just conditionally change just the className and consistently only render the same div, but then this would depend on what is inside your div and how much you want to leverage your css. For instance, for the above example, something like,

  render(){
    //Conditional change of class
    const { hasLoaded } = this.state;
    return <div className={hasLoaded ? "myregularpage" : "myanimation" }/>
  }
1 Like

Very cool, thank you! I hadn’t even thought of using CSS for the animation, I was just going to make an animated gif.

I think I’m going to try the second method, it looks a bit cleaner. Thanx again!