Image preload React

import { useEffect } from 'react';

declare global {
  interface Window {
    usePreloadImagesData?: Record<string, unknown[]>;
  }
}

export const usePreloadImages = (imageSrcs: string[]): void => {
  useEffect(() => {
    const randomStr = Math.random().toString(32).slice(2) + Date.now();
    window.usePreloadImagesData = window.usePreloadImagesData ?? {};
    window.usePreloadImagesData[randomStr] = [];
    for (const src of imageSrcs) {
      // preload the image
      const img = new Image();
      img.src = src;
      // keep a reference to the image
      window.usePreloadImagesData[randomStr].push(img); 
    }
    return () => {
      delete window.usePreloadImagesData?.[randomStr];
    };
  }, [ imageSrcs ]);
};

Source: stackoverflow.com

Similar codes

2 votes178 views1 answer
React native cover image in parent view
Javascript React
0 vote190 views1 answer
React native svg size
Javascript React
0 vote177 views1 answer
React hooks component re render when button press
Javascript React
1 vote189 views1 answer
How to get the value of textarea in react
Javascript React
0 vote191 views1 answer
React 10 to 1 with step -2 (odd numbers between [1..10] inverted order)
Javascript React
0 vote292 views1 answer
How to declare a variable in react
Javascript React
0 vote176 views1 answer
Cannot find module react scripts
Javascript React
2 votes189 views1 answer
Vertical align center react native view
Javascript React
0 vote188 views1 answer
Fetchutils in react admin
Javascript React
0 vote214 views1 answer
ResolveAssetSource react-native-web
Javascript React