异步下载静态图像，NextJS+TypeScript

Question

我有个问题，我正在用NextJS和TypeScript制作一个网站。这个网站有一个展示库，我的整个网站都是静态的。

我在第一个视图中显示的是图像的缩略图，当我单击缩略图时，它会将原始图像显示为覆盖图。但当我点击缩略图时，我必须等待原始图像下载。

我想知道是否有办法在后台下载我的原始来源，这样当我们点击缩略图时，我们就不必等待原始图像下载，我们可以直接查看。

为了制作展示库，我使用了simple-react-lightbox软件包。

这是我的包.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"
}
}

还有我的组件

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是我的原始图像路径的常量数组。类似/_next/static/media/0asd.jpg

谢谢！

Answer 1

您可以使用web Worker在后台加载图像，并在需要时将Blob数据传递给主线程。