From ec1dc944df6e1533e3153df46a7a136e8ed8775e Mon Sep 17 00:00:00 2001 From: Knight Date: Sat, 28 Dec 2024 11:17:32 -0500 Subject: [PATCH] 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. --- generateSite.js | 31 +++++++++++++++++++------------ 1 file changed, 19 insertions(+), 12 deletions(-) diff --git a/generateSite.js b/generateSite.js index b279e81..04fb430 100644 --- a/generateSite.js +++ b/generateSite.js @@ -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 */ + }
${image?.localPath ? `
- ${image.metadata.description || ''} ${image.metadata.description || ''} + ${image.metadata.description || ''}
` : '

Image not available

'}