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

How to preload images in React.js?

Sleepy Squirrel answered on November 19, 2021 Popularity 9/10 Helpfulness 3/10

answer How to preload images in React.js?

related Image preload React

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 preload

Link to this answer
Share Copy Link

Contributed on Jun 22 2022

Sleepy Squirrel

0 Answers Avg Quality 2/10

Closely Related Answers

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

Link to this answer
Share Copy Link

Contributed on Nov 19 2021

Tame Turtle

0 Answers Avg Quality 2/10

How to preload images in React.js?

Contents

More Related Answers

How to preload images in React.js?

Closely Related Answers

Image preload React

Grepper

Documentation

Social

Legal

Contact

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