I have a query regarding my website development using NextJS and TypeScript. The site features a showcase gallery and is completely static.
Currently, the initial view shows thumbnails of images. When clicking on a thumbnail, the original image is displayed as an overlay. However, there is a delay while waiting for the original image to download upon clicking.
I am interested in optimizing this process by preloading the original sources in the background. This way, users can directly view the image without any wait time. Is there a method to achieve this?
For creating the showcase gallery, I am utilizing the simple-react-lightbox package.
Here is a glimpse of my package.json:
{
"name": "showcase",
"private": true,
[...]
On top of that, here is a snippet of one of my components:
import {
Grid,
Paper
} from "@mui/material";
[...]
The array IMAGES.original contains the paths to the original images such as /_next/static/media/0asd.jpg.
Any insights would be greatly appreciated! Thank you!