javascript - How to preload images in React.js?

Question

How to preload images in React.js? I have dropdown select component which works like menu , but i have to preload image icons for items,because sometimes they are not visible on first open.

I have tried:

https://github.com/sambernard/react-preload

https://github.com/wizardzloy/react-img-preload

First one has nice API easy to understand and use ,but is spaming console with warning that images were not loaded even when they were. Second one has strange API ,but I tried example and it did not preload anything.

So I probably need to implement something at my own ,but do not know where to start. Or another possibility would be to loaded them with webpack.

Answer 1

Supposing you have pictures: string[]; - array of pictures urls defined in your component's props. You should define componentDidMount() method in your component and then just create new Image object for each picture you want to be preloaded:

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

It forces browser to load all images. This example is written in TypeScript.