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 vote377 views1 answer
How to add autoserial number in react js
Javascript React
4 votes366 views3 answers
React native keystore
Javascript React
1 vote367 views1 answer
Reactjs change window name
Javascript React
8 votes311 views2 answers
Useref in react typescrpt
Javascript React
5 votes363 views2 answers
React js download file
Javascript React
0 vote325 views1 answer
Toggle class onscroll hook react
Javascript React
1 vote353 views1 answer
Stop page refresh on button click react
Javascript React
0 vote351 views1 answer
React 1 to 10 with step 2 (odd numbers)
Javascript React
2 votes349 views1 answer
How to add react scroll scrollable link
Javascript React
0 vote355 views1 answer
Unrecognized font family 'feather' react native
Javascript React