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

Refactor progressive image handling in generateSite.js. Improved loading experience by adjusting CSS styles for thumbnails and full images, ensuring proper layering and visibility during image loading. Enhanced aspect ratio handling and added a dark background for better user experience while images are loading.

Browse Source
This commit is contained in:
Knight 2024-12-28 11:17:32 -05:00
parent 840dc872df
commit ec1dc944df
1 changed files with 19 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
generateSite.js
View File

@ -56,45 +56,52 @@ async function generateSite() {
position: relative;
width: 100%;
height: 100%;
aspect-ratio: 1; /* This will be adjusted based on the actual image */
background: #000; /* Dark background while loading */
aspect-ratio: 1;
}
.progressive-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
right: 0;
bottom: 0;
max-width: 100%;
max-height: 100%;
margin: auto;
object-fit: contain;
transition: opacity 0.5s ease-in-out;
}
.thumbnail {
filter: blur(10px);
transform: scale(1.1);
transform: scale(1.02); /* Reduced scale to prevent edges showing */
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=50"
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')"
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 || ''}"
>
</div>
` : '<p>Image not available</p>'}