Company logo
  • Jobs
  • Bootcamp
  • About Us
  • For professionals
    • Home
    • Jobs
    • Courses
    • Questions
    • Teachers
    • Bootcamp
  • For business
    • Home
    • Our process
    • Plans
    • Assessments
    • Payroll
    • Blog
    • Calculator

0

72
Views
Loader until images loaded react

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 onLoad, but don't understand how to get this bool from onLoad which is in components.

7 months ago · Juan Pablo Isaza
2 answers
Answer question

0

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}
          onLoad={() => this.setState({loaded: true})}
        />
      </div>
    );
  }
}
7 months ago · Juan Pablo Isaza Report

0

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 👇

function MyComponent(){
  // Create an instance of react's useState hook
  const [isLoading, setIsLoading] = useState(true);

  // This will run after the page has mounted
  React.useEffect(() => {
    setIsLoading(false);
  }, [setIsLoading]);

  return{
    //... 
  }
}
7 months ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

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