0

I have a question, I'm making a website with NextJS and TypeScript. The website has a showcase gallery and my whole site is static.

What I display in first view is thumbnails of images and when I click on a thumbnail, it displays the original image as an overlay. But when I click on the thumbnails, I have to wait for the original image to download.

I wanted to know if there is a way to download my original sources in the background so that when we click on a thumbnail we don't have to wait for the original image to download and we can view it directly.

To make the showcase gallery I use simple-react-lightbox package.

There is my package.json

{
  "name": "showcase",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build && next export",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@emotion/react": "^11.5.0",
    "@emotion/styled": "^11.3.0",
    "@mui/icons-material": "^5.0.5",
    "@mui/material": "^5.0.6",
    "next": "12.0.2",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "simple-react-lightbox": "^3.6.9-0"
  },
  "devDependencies": {
    "@types/node": "16.11.6",
    "@types/react": "17.0.34",
    "@types/simple-react-lightbox": "^3.6.1",
    "eslint": "7.32.0",
    "eslint-config-next": "12.0.2",
    "typescript": "4.4.4"
  }
}

And there is my component

import {
    Grid,
    Paper
} from "@mui/material";
import Image from 'next/image';
import IMAGES from './galleryImages';
import { SRLWrapper, useLightbox } from "simple-react-lightbox";
import CustomImageLoader from '../imageLoader';

const options = {
    settings: {
        slideAnimationType: 'fade',
        disablePanzoom: false,
        disableWheelControls: false,
        boxShadow: 'none'
    },
    buttons: {
        showAutoplayButton: false,
        showDownloadButton: false,
        showFullscreenButton: false,
        showThumbnailsButton: true
    },
    thumbnails: {
        showThumbnails: true
    },
    caption: {
        showCaption: false
    },
    progressBar: {
        showProgressBar: false
    }
}

const ShowCase = () => {
    const { openLightbox, closeLightbox } = useLightbox()
    return (
        <Grid container spacing={1} item xs={11} lg={8} alignItems="flex-start" justifyContent="center">
            <SRLWrapper elements={IMAGES.original} options={options} />
            {IMAGES.thumbnails.map((image, index) => (
                <Grid style={{ cursor: 'pointer' }} item xs={2} key={image.src}>
                    <Paper elevation={5}>
                        <Image
                            loader={CustomImageLoader}
                            onClick={() => openLightbox(index)}
                            src={image}
                            layout="responsive"
                            sizes="50vw"
                        />
                    </Paper>
                </Grid>
            ))}
        </Grid>
    )
}

export default ShowCase

IMAGES.original is an const array of my original images path. Like /_next/static/media/0asd.jpg

Thank you !

jean-daniel kuenzi
  • 1

1 Answers1

1

You can use web workers to load images in background and pass the Blob data to the main thread as and when needed.

Arun
  • 56
  • 1