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

6 votes333 views3 answers
Multiple path names for a same component in react router
Javascript React
0 vote212 views1 answer
Create react app node: internal/modules/cjs/loader:936throw err;^Error: Cannot find module 'react-scripts/scripts/init.js'
Javascript React
0 vote196 views1 answer
Compass in react js
Javascript React
0 vote217 views2 answers
How to run react builed version
Javascript React
1 vote203 views1 answer
Reactjs change window name
Javascript React
0 vote205 views2 answers
Count down timer in react native
Javascript React
0 vote198 views1 answer
React-native-paper resize switch resize
Javascript React
0 vote215 views1 answer
Ab mob react native expo
Javascript React
1 vote188 views1 answer
How to populate a checkbox from an api react
Javascript React
0 vote198 views1 answer
Switch button react value
Javascript React