Breaking News: Grepper is joining You.com. Read the official announcement!

Image preload React

Tame Turtle answered on November 19, 2021 Popularity 10/10 Helpfulness 2/10

answer Image preload React

related How to preload images in React.js?

Image preload React

Comment

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 ]);
};

Popularity 10/10 Helpfulness 2/10 Language javascript

Source: stackoverflow.com

Tags: hook image javascript preload

Link to this answer
Share Copy Link

Contributed on Nov 19 2021

Tame Turtle

0 Answers Avg Quality 2/10

Closely Related Answers

How to preload images in React.js?

Comment

/*
Supposing you have pictures: string[];
- array of pictures urls defined in your component's props.
You should define componentDidMount() 
method in your component and then just create new Image object for each picture you want to be preloaded:
*/
componentDidMount() {
    this.props.pictures.forEach((picture) => {
        const img = new Image();
        img.src = picture.fileName;
    });
}

Popularity 9/10 Helpfulness 3/10 Language javascript

Source: stackoverflow.com

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Jun 22 2022

Sleepy Squirrel

0 Answers Avg Quality 2/10

Image preload React

Contents

More Related Answers

Image preload React

Closely Related Answers

How to preload images in React.js?

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.