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 vote391 views1 answer
How to write sepearet styles in single line in react native
Javascript React
2 votes350 views1 answer
Yarn create react-app test00h00m00s 0/0: : ERROR: [Errno 2] No such file or directory: 'create'
Javascript React
0 vote409 views1 answer
React html symbol code
Javascript React
8 votes370 views3 answers
Disable eslint for react project
Javascript React
0 vote385 views1 answer
Imagebackground with input inot avoiding react native
Javascript React
2 votes377 views2 answers
Fullcalendar react add event duration
Javascript React
0 vote377 views1 answer
Add React Router to React Redux CRUD App
Javascript React
1 vote377 views2 answers
React native select simulator
Javascript React
0 vote363 views1 answer
Shallow render in react
Javascript React
4 votes377 views1 answer
React useeffect not on first render
Javascript React