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 visib

Answer 1

The important thing to do is to save the image variable as PERSISTANT.

In a persistant context,in a global var or in a component that will not be unmounted before display the images :

window.preloadedPictures = []

In my component :

var preloadedData = pictures.map((picture) => {
    const img = new Image();
    img.src = picture.fileName;
    return img
});

myContextOrGlobalVar.preloadedPictures = preloadedData ///IMPORTANT