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 vote102 views1 answer
Node_modules/react-native-paper/lib/module/core/Provider.js
Javascript React
15 votes107 views2 answers
React native get location
Javascript React
0 vote105 views2 answers
Read and save excel with react
Javascript React
1 vote112 views2 answers
Send an email react native
Javascript React
2 votes108 views2 answers
React detect screen size
Javascript React
14 votes117 views5 answers
React conditional classname
Javascript React
-1 vote123 views1 answer
This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native.
Javascript React
2 votes112 views1 answer
Emmet react self closing tags
Javascript React
1 vote103 views1 answer
How to set state when change viewport react
Javascript React
0 vote117 views1 answer
React set state before render
Javascript React