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

24 votes119 views6 answers
Box shadow react native
Javascript React
0 vote116 views2 answers
Animation react
Javascript React
1 vote119 views1 answer
Class MyComponent extends React.Component { } ... what is the ES5 equivalent of this *
Javascript React
0 vote105 views1 answer
How to unmount inactive screens in bottom tab react native
Javascript React
0 vote135 views1 answer
Get id button clicked react
Javascript React
3 votes123 views1 answer
React proxy error: could not proxy request from localhost:3000 to http localhost:5000 econnreset
Javascript React
18 votes118 views6 answers
React-native make android apk
Javascript React
8 votes120 views4 answers
React multiple classnames
Javascript React
20 votes112 views2 answers
React localstorage
Javascript React
0 vote139 views1 answer
React native height full
Javascript React