react call function after page has loaded

Question

I want to display images onDrop in one of my components. To make the drop more seamless I want to preload the images like this:

componentDidMount(){
   this.props.photos.forEach(picture => {
      const img = new Image();
      img.src = picture.url;
    });
}

However I don't want to slow down my initial load time by preloading all these images, so I want to only load them after everything else has loaded.

I tried putting the loading function in a sepperate component and then loaded it in like this:

const LazyImgLoader = import("./ImgLoader ");
const ImgLoader = React.lazy(() => LazyImgLoader);

but that didn't work and seems kind of hacky aswell. How can I load my images in after my page has loaded?

Answer 1

It looks as though you need to load the images asynchronously.

Happily this is built into the Image class provided with React Native (of course I am making the assumption that this is what you are using).

See the documentation , particularly the onLoad, onLoadStart and onLoadEnd callbacks. These should enable you to use placeholders for your images until they are loaded and only present them once the loading is complete.