react 判断图片是否加载完成,如何在React.js中预加载图像？

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:

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.

解决方案

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.