I have a scenario where I need to display images onDrop within one of my components. To ensure a smooth drop experience, I am considering preloading the images using the following approach:
componentDidMount(){
this.props.photos.forEach(picture => {
const img = new Image();
img.src = picture.url;
});
}
However, I am hesitant about slowing down the initial load time by preloading all these images. Is there a way to load them only after the rest of the page has loaded?
I attempted to move the loading function into a separate component and then import it like so:
const LazyImgLoader = import("./ImgLoader ");
const ImgLoader = React.lazy(() => LazyImgLoader);
Unfortunately, this method did not work as expected and seems somewhat hacky. Can anyone suggest a better way to load the images after the page has fully loaded?