Lets say we have the component that is mounted and unmounted N times. I'm using this component for background in other components so I cant escape mounting multiple times.
On every mount a request is fetched to the server window.API_BASE_URL for the camera${config.activeCameraId}.jpg.
Which causes the component to blink for a sec until the img url is fully loaded.
const imgBackgroundComponent = (props) => {
// state logic
const defaultCameraImageURL = `${window.API_BASE_URL}resources/images/camera${config.activeCameraId}.jpg`;
return <div
className={'image-wrapper'}
key={cameraImage}
style={{
width: cameraImageSize.Width, // full image width
height: cameraImageSize.Height, // full image height
transform: `scale(${scale}) rotate(${rotate}deg) translateX(${pan.x}px) translateY(${pan.y}px)`,
backgroundImage: `url(${defaultCameraImageURL})`,
backgroundRepeat: `no-repeat`,
backgroundPositionX: `${frameImgSrcBase64 && config.activeCameraId < cameraRowsCols.cols ? -cameraImageSize.Width * config.activeCameraId : 0}px`
}}/>
}
Im looking for a way to save the img once fetched from the server and maybe store it in a singleton, which I did using base64 string. But the images are large and doing operations with the base64 (like zoom pan rotate) is kinda laggy. What can i do to store the image once fetched form the server in order to load fast on component mount.
