CODEWITHSUNDEEP
javascriptreactjsimageurlloading
quentinjeanningros
quentinjeanningros

Reputation: 15

Prerender images from URL in reactjs

Is it possible to prerender a list of images based on URL to prevent first loading on display with react or JS?

Thanks in advance.

EDIT: I have a carousel of images and all images are display one by one. When an image are are display for the first time this image take some time to be render because she need to be get from the url. And if I display this same image a second time I will not wait. Then I want to know if there is a solution to preload all images directly after get the url in a ComponentDidMount even the loading become longer.

An other example: I have a list of image and I want display them all at the same time. How can I preload them all before end the loading and start the render.

Upvotes: 0

Views: 1689

Answers (2)

Johnson
Johnson

Reputation: 46

Do you simply want to preload images in advance?

The article of the Preloading Content might help.

componentDidMount() {
  const imageUrlList = ['a.jpg', 'b.jpg', 'c.jpg'];
  this.preloadImages(imageUrlList);
}
  
preloadImages(urlList) {
  let fragment = document.createDocumentFragment(); 
  for (let i = 0; i < urlList.length; i++) {
    const imgUrl = urlList[i];
    const linkEl = document.createElement('link');
    linkEl.setAttribute('rel', 'preload');
    linkEl.setAttribute('href', imgUrl);
    linkEl.setAttribute('as', 'image');
    fragment.appendChild(linkEl);
  }
  document.head.appendChild(fragment);
}

Upvotes: 2

Anas M.I
Anas M.I

Reputation: 582

Not so clear from what you mean by prerender.

By preloading, do you mean that you want that the component renders only when the image is ready?

If so, you could do something like this:

componentDidMount() {
  const img = new Image();
  img.src = Newman; // by setting an src, you trigger browser download

  img.onload = () => {
    // when it finishes loading, update the component state
    this.setState({ imageIsReady: true });
  }
}

render() {
  const { imageIsReady } = this.state;

  if (!imageIsReady) {
    return <div>Loading image...</div>; // or just return null if you want nothing to be rendered.
  } else {
    return <img src={Newman} /> // along with your error message here
  }
}

Upvotes: 0

Related Questions