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

8 votes249 views2 answers
React native rotate image
Javascript React
0 vote216 views1 answer
React-native-paper resize switch resize
Javascript React
-2 votes231 views3 answers
Keyboard dismiss in react native
Javascript React
0 vote210 views1 answer
React inlinle style set background image
Javascript React
0 vote200 views1 answer
Close button react
Javascript React
19 votes208 views2 answers
Devtools failed to load sourcemap when debugging react native
Javascript React
31 votes203 views1 answer
React router dom npm
Javascript React
0 vote224 views1 answer
How to add react.memo in export list
Javascript React
0 vote203 views2 answers
Change iphone return in keyboard to search in react native
Javascript React
0 vote232 views1 answer
React native listview date separator site:stackoverflow.com
Javascript React