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

0 vote223 views1 answer
React native dynamic style
Javascript React
0 vote255 views1 answer
Link externo no react
Javascript React
7 votes256 views3 answers
Conditional style prop react
Javascript React
0 vote216 views1 answer
How to disable keyboard calender input in material ui datepicker reactjs
Javascript React
0 vote285 views1 answer
React native elements bottom sheet close on back button press
Javascript React
1 vote224 views1 answer
ERESOLVE unable to resolve dependency tree Found: [email protected] Could not resolve dependency: react native paper
Javascript React
0 vote197 views1 answer
Flatpicker not focusing in modal React
Javascript React
0 vote205 views1 answer
Using RN BootSplash with React Navigation
Javascript React
0 vote210 views2 answers
React social login buttons
Javascript React
0 vote220 views3 answers
Proptypes for a react component
Javascript React