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

48 votes154 views1 answer
Emmet not working react js
Javascript React
85 votes229 views3 answers
React random number
Javascript React
18 votes163 views3 answers
How to setup tailwind for reactjs
Javascript React
0 vote153 views1 answer
Check scroll top height in react js
Javascript React
-1 vote150 views1 answer
How to load the images from the website dynamically in react
Javascript React
0 vote149 views1 answer
Rich text react renderer
Javascript React
0 vote153 views1 answer
2.When will the validation functions be called in the react js
Javascript React
1 vote145 views1 answer
I18n turn off suspense react
Javascript React
0 vote150 views1 answer
React simple typewriter
Javascript React
0 vote158 views1 answer
Refresh page by hand in react
Javascript React