0

In NextJS,

I have an image component (next/image), which renders the URL which is in prop, but the URL is dynamic. This means if the user clicks on ONE the state changes to 1 so the URL changes, similarly for TWO, THREE, FOUR, and FIVE.

But the issue is, on state change the URL also changes but on UI it's reflecting after some time (load time). I need the image immediately load or at least disappear the previous image on URL change and load the whole image.

I don't want to render all image at first and display only one base on state because the page already exceeds DOM size.

Any technique to solve this issue?

Shiva
  • 476
  • 3
  • 15
  • Either you will need to preload the images, or you display spinners while the images load. I believe you already have plenty of answers to the first on stackoverflow like https://stackoverflow.com/questions/3646036/preloading-images-with-javascript. [``](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types/preload) seems promising – Andy Aug 05 '22 at 16:24
  • Hi @Andy Need to try spinner, but can't preload all images because it reduces the page speed. Any clue when to show spinner in react perspective? – Shiva Aug 05 '22 at 16:27
  • 1
    Why would it reduce page speed? It’s a resource hint, created for performance purposes. The browser will wait to download it until it’s idle. – Andy Aug 05 '22 at 16:29
  • 1
    If you want to go with a spinner anyway, or a solution that combines both, have a look at https://stackoverflow.com/questions/56902522/react-show-loading-spinner-while-images-load – Andy Aug 05 '22 at 16:34
  • Oh ok, I thought preload will cause an increase in initial load time. Thanks for your help. – Shiva Aug 05 '22 at 16:35

0 Answers0