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.
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>
);
}
}
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.
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{
//...
}
}