React: Show loading spinner while images load
The reason why onLoad was never called, is because you never had the images in the DOM, so instead of conditionally rendering, conditionally set the display property to none & block.
Below is a simple example of how you could wait for all images to load.
Safe to assume the image with the largest file size would most likely be the last to load
Most certainly not!!, the time it takes for an image to load is not always down to size, caching, or server load can effect these.
const {useState, useEffect, useRef} = React;
const urls = [
"https://placeimg.com/100/100/1" ,
"https://placeimg.com/100/100/2" ,
"https://placeimg.com/100/100/3"
];
function Test() {
const [loading, setLoading] = useState(true);
const counter = useRef(0);
const imageLoaded = () => {
counter.current += 1;
if (counter.current >= urls.length) {
setLoading(false);
}
}
return <React.Fragment>
<div style={{display: loading ? "block" : "none"}}>
Loading images,
</div>
<div style={{display: loading ? "none" : "block"}}>
{urls.map(url =>
<img
key={url}
src={url}
onLoad={imageLoaded}/>)}
</div>
</React.Fragment>;
}
ReactDOM.render(<React.Fragment>
<Test/>
</React.Fragment>, document.querySelector('#mount'));<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="mount"></div>