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

4 votes179 views2 answers
React hooks useref is called in function which is neither a react function component
Javascript React
1 vote211 views1 answer
React native new project mac
Javascript React
0 vote229 views1 answer
Navigation.openDrawer is not a function react native
Javascript React
0 vote202 views1 answer
How to add base url as src in react native
Javascript React
0 vote186 views1 answer
React native showing double header stack and drawer menu
Javascript React
5 votes202 views2 answers
Svg react native
Javascript React
-1 vote196 views2 answers
React native scaling font
Javascript React
0 vote194 views1 answer
React native Setting a timer for a long period of time
Javascript React
0 vote241 views1 answer
React include a polyfill webpack v5
Javascript React
-1 vote166 views1 answer
React localstorage remove item
Javascript React