Loader until images loaded react-CodePudding

I have a task - make preloader until all images get loaded. So we using react, and I'm new in this framework, I need help because of I can't make right logical steps. We have App.js and this file doesn't have any img in return only components, so how to get info from images that they have loaded? I know about onl oad, but don't understand how to get this bool from onl oad which is in components.

CodePudding user response：

There are several ways to do this, but the simplest is to display the final image hidden, and then flip it to visible once it loads.

   class Foo extends React.Component {
  constructor(){
    super();
    this.state = {loaded: false};
  }

  render(){
    return (
      <div>
        {this.state.loaded ? null :
          <div
            style={{
              background: 'red',
              height: '400px',
              width: '400px',
            }}
          />
        }
        <img
          style={this.state.loaded ? {} : {display: 'none'}}
          src={this.props.src}
          onl oad={() => this.setState({loaded: true})}
        />
      </div>
    );
  }
}

CodePudding user response：

I've never had to deal with this but there is a way (which might be a bit hacky).

You can essentially use a useEffect hook that is built into React. This is used in the functional components. It essentially runs commands after the page has mounted. What you can try, is initially set a boolean state (e.g.: isLoading) to be true and then run a command to set this state to false in the useEffect hook.

Example