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 vote364 views1 answer
Render(<App />); const linkElement = screen.getByText(/learn react/i); expect(linkElement).toBeInTheDocument();
Javascript React
0 vote349 views1 answer
How to make this transform with React-Native? https://stackoverflow.com/questions/37538303/how-to-make-this-transform-with-react-native
Javascript React
0 vote393 views1 answer
React Redux store exemple
Javascript React
0 vote393 views1 answer
Get status bar height react native
Javascript React
3 votes413 views2 answers
Use font awsome in react
Javascript React
1 vote428 views2 answers
Cannot read property of undefined (reading 'push') react
Javascript React
0 vote403 views1 answer
React js practical tutorial
Javascript React
10 votes322 views4 answers
Attempted import error 'switch' is not exported from 'react-router-dom'. in react js
Javascript React
0 vote387 views1 answer
This.props undefined react native
Javascript React
-1 vote372 views1 answer
React native list view
Javascript React