[英]Download static images asynchronous, NextJS + TypeScript
I have a question, I'm making a website with NextJS and TypeScript.我有一个问题,我正在用 NextJS 和 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.为了制作展示画廊,我使用
simple-react-lightbox
包。
There is my package.json有我的 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. IMAGES.original
是我的原始图像路径的常量数组。 Like /_next/static/media/0asd.jpg
喜欢
/_next/static/media/0asd.jpg
Thank you !谢谢 !
您可以使用 Web Worker 在后台加载图像,并在需要时将 Blob 数据传递给主线程。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.