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 vote343 views1 answer
Error-too-many-re-renders-react-limits-the-number-of-renders-to-prevent
Javascript React
2 votes322 views2 answers
React not recognizing lorem
Javascript React
0 vote338 views1 answer
React paypal express checkout
Javascript React
1 vote319 views1 answer
Has been blocked by cors policy react fetch firebase realtime database
Javascript React
10 votes343 views2 answers
React navigation no header
Javascript React
3 votes339 views1 answer
React native run on device command line
Javascript React
0 vote291 views1 answer
React deployment pipeline
Javascript React
16 votes307 views4 answers
Uuid react
Javascript React
0 vote312 views1 answer
Location maps react native
Javascript React
0 vote311 views1 answer
React clone element
Javascript React