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 vote136 views1 answer
Proactive vs reactive
Javascript React
0 vote162 views2 answers
Disable a button react
Javascript React
1 vote153 views1 answer
Get current platform react native
Javascript React
0 vote172 views1 answer
React native flexbox 2 columns 1 fixed width
Javascript React
4 votes169 views1 answer
Add array of object to state react
Javascript React
0 vote145 views1 answer
Warning React Hook useEffect has a missing dependency:
Javascript React
0 vote134 views5 answers
Line 7:18: 'Section' is not defined react/jsx-no-undef
Javascript React
-1 vote146 views1 answer
React native list view
Javascript React
0 vote135 views1 answer
React Alert when rate changes
Javascript React
8 votes148 views3 answers
React Lazy()
Javascript React