How do i load all images before rendering the page? - reactjs

Question

So i have a preloader that works, i just have some problems with my image component itself.
My image component below in my theory should after the first render get all of my image tags used in my project.
Then when the image event onLoad is fired, it should update a state which is didLoad and set it to true. When the page is rerendered again because of the updated state, it should check if didLoad is true, if it's true it should execute the useEffect inside the condition once and add 1 to the amount loaded.
And then i check if images is higher than 0, and images is equal to images loaded then remove preloader.
Obviously something is wrong since i can't get it to work, it needs to work with all images not one at a time because it's not a lazyload for the image itself, but the preloader for the whole page.
Ignore preload: false it's for when the preloader is removed, then it should play page animations.
/** #jsx jsx */
import React, { useContext, useEffect, useState } from "react";
import { css, jsx } from "#emotion/core";
import preloadContext from "../../context/preload.context";
const Img = ({ src, alt }) => {
const [didLoad, setLoad] = useState(false);
const [preload, setPreload] = useContext(preloadContext);
const imgStyle = css`
width: 100%;
height: 100%;
display: block;
object-fit: cover;
`;
useEffect(() => {
setPreload({
amount: preload.amount++,
preload: preload.preload,
isLoaded: preload.isLoaded,
});
}, []);
if (didLoad === true) {
useEffect(() => {
setPreload({
amount: preload.amount,
preload: preload.preload,
isLoaded: preload.isLoaded++,
});
}, []);
}
return (
<img
src={src}
onLoad={(e) => {
setLoad(true);
}}
css={imgStyle}
alt={alt}
onDragStart={(e) => e.preventDefault()}
/>
);
};
export default Img;

Answer 1

The answer is You can and You cannot.
We can : if you're trying to hold rendering of a certain component until an <img /> (Outside of this component is loaded)
We cannot : If you're trying to track loading of <img /> which is INSIDE of a not rendered component. In this case Image won't load until we render it's parent component.
For the first option here's how you can do it:
constructor(props) {
super(props);
this.state = { loaded: 0 };
this.handleImageLoaded = this.handleImageLoaded.bind(this);
this.image = React.createRef();
}
componentDidMount() {
const img = this.image.current;
if (img && img.complete) {
this.handleImageLoaded(10); // 100 / Number of images to track
}
}
handleImageLoaded(loadIncrement) {
if (!this.state.loaded)
this.setState({ loaded: loadIncrement });
}
render() {
return (
<div>
<img src='image.jpg' ref={this.image} onLoad={this.handleImageLoaded} />
{this.state.loaded >= 100 && <MyComponent />}
</div>
);
}
As mentioned in the comment you must divide 100 to number of images you wish to track and then one the image is loaded it will add the loading percentage to the parent state. One the loaded state reach 100 or above it will render <MyComponent />