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

3 votes145 views3 answers
Update create react app
Javascript React
2 votes155 views1 answer
Make page refresh on top in react js
Javascript React
14 votes108 views9 answers
Attempted import error: 'switch' is not exported from 'react-router-dom'.
Javascript React
6 votes168 views2 answers
String to html javascript react
Javascript React
18 votes156 views2 answers
Store data in localstorage react
Javascript React
1 vote148 views1 answer
Add a text on last object map reactjs
Javascript React
0 vote144 views1 answer
React fetch request with content type x-www-form-urlencoded
Javascript React
0 vote165 views1 answer
React-multi-carousel don't work
Javascript React
1 vote151 views1 answer
React variable in stirng
Javascript React
32 votes157 views1 answer
How to do routes react js
Javascript React