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

1 vote359 views1 answer
React spread operator
Javascript React
0 vote380 views1 answer
Row smaller than the container bootstrap react
Javascript React
0 vote355 views1 answer
Concatenate state with previous state in react redux
Javascript React
0 vote360 views1 answer
How to add alternate image in img tag in react
Javascript React
1 vote356 views1 answer
Difference between dom and react dom
Javascript React
0 vote351 views3 answers
Scrollview refresh react native
Javascript React
0 vote455 views1 answer
Pass status of checkbox to a function react js
Javascript React
-1 vote354 views1 answer
Timestamp to unix time react
Javascript React
8 votes363 views1 answer
React hooks with objects
Javascript React
4 votes361 views3 answers
Image react native base64
Javascript React