knight/analogGallery
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor image loading and processing in generateSite.js. Updated CSS for improved thumbnail and full image handling, enhancing loading transitions and aspect ratio management. Modified image serving logic to include progressive JPEG support and caching headers, ensuring better performance and user experience.

Browse Source
This commit is contained in:
Knight 2024-12-28 11:22:02 -05:00
parent ec1dc944df
commit bbcb932147
1 changed files with 24 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
generateSite.js
View File

@ -56,52 +56,45 @@ async function generateSite() {
position: relative;
width: 100%;
height: 100%;
background: #000; /* Dark background while loading */
aspect-ratio: 1;
}
.progressive-image {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
max-width: 100%;
max-height: 100%;
margin: auto;
width: 100%;
height: 100%;
object-fit: contain;
transition: opacity 0.5s ease-in-out;
}
.thumbnail {
filter: blur(10px);
transform: scale(1.02); /* Reduced scale to prevent edges showing */
transform: scale(1.1);
opacity: 1;
z-index: 1; /* Place thumbnail above full image while loading */
}
.full-image {
opacity: 0;
z-index: 2; /* Place full image on top when loaded */
}
.full-image.loaded {
opacity: 1;
}
.full-image.loaded + .thumbnail {
opacity: 0; /* Hide thumbnail when full image is loaded */
}
</style>
</head>
<body>
<div class="image-container">
${image?.localPath ? `
<div class="progressive-image-container">
<img
class="progressive-image thumbnail"
src="${image.localPath}?quality=10&width=100"
alt="${image.metadata.description || ''}"
onload="this.parentElement.style.aspectRatio = this.naturalWidth + '/' + this.naturalHeight;"
>
<img
class="progressive-image full-image"
src="${image.localPath}"
alt="${image.metadata.description || ''}"
onload="this.classList.add('loaded'); this.parentElement.style.aspectRatio = this.naturalWidth + '/' + this.naturalHeight;"
>
<img
class="progressive-image thumbnail"
src="${image.localPath}?quality=10&width=50"
alt="${image.metadata.description || ''}"
onload="this.classList.add('loaded')"
>
</div>
` : '<p>Image not available</p>'}
@ -161,11 +154,21 @@ async function serveStaticSite(port = 3000) {
try {
const Sharp = (await import('sharp')).default;
const image = await Sharp(filePath)
.resize(parseInt(width))
.jpeg({ quality: parseInt(quality) })
.resize({
width: parseInt(width),
height: parseInt(width),
fit: 'inside'
})
.jpeg({
quality: parseInt(quality),
progressive: true
})
.toBuffer();
res.writeHead(200, { 'Content-Type': 'image/jpeg' });
res.writeHead(200, {
'Content-Type': 'image/jpeg',
'Cache-Control': 'public, max-age=31536000'
});
res.end(image);
return;
} catch (error) {