Optmial Image Loading
This commit is contained in:
parent
7f9d32adf5
commit
f84757fbff
@ -49,6 +49,9 @@
|
|||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
height: auto;
|
height: auto;
|
||||||
display: block;
|
display: block;
|
||||||
|
flex-grow: 1;
|
||||||
|
object-fit: contain;
|
||||||
|
transition: opacity 0.3s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.date-overlay {
|
.date-overlay {
|
||||||
@ -198,10 +201,13 @@
|
|||||||
polaroidElement.style.backgroundColor = `${polaroid.highlightColor}33`;
|
polaroidElement.style.backgroundColor = `${polaroid.highlightColor}33`;
|
||||||
|
|
||||||
const img = document.createElement('img');
|
const img = document.createElement('img');
|
||||||
img.src = polaroid.imgSrc;
|
|
||||||
img.alt = polaroid.caption;
|
img.alt = polaroid.caption;
|
||||||
img.setAttribute('data-original-width', polaroid.width);
|
img.setAttribute('data-original-width', polaroid.width);
|
||||||
img.setAttribute('data-original-height', polaroid.height);
|
img.setAttribute('data-original-height', polaroid.height);
|
||||||
|
img.setAttribute('data-base-src', polaroid.imgSrc);
|
||||||
|
img.src = polaroid.imgSrc;
|
||||||
|
|
||||||
|
img.onload = () => loadOptimalThumbnail(img); // Load optimal thumbnail after initial load
|
||||||
|
|
||||||
const dateOverlay = document.createElement('div');
|
const dateOverlay = document.createElement('div');
|
||||||
dateOverlay.className = 'date-overlay';
|
dateOverlay.className = 'date-overlay';
|
||||||
@ -231,6 +237,42 @@
|
|||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function getOptimalThumbnailSize(width, height) {
|
||||||
|
const sizes = [256, 512, 768, 1024, 1536, 2048];
|
||||||
|
const maxDimension = Math.max(width, height);
|
||||||
|
return sizes.find(size => size >= maxDimension) || sizes[sizes.length - 1];
|
||||||
|
}
|
||||||
|
|
||||||
|
function loadOptimalThumbnail(img) {
|
||||||
|
// Use a small delay to ensure the image has rendered
|
||||||
|
setTimeout(() => {
|
||||||
|
const containerWidth = img.offsetWidth;
|
||||||
|
const containerHeight = img.offsetHeight;
|
||||||
|
const devicePixelRatio = window.devicePixelRatio || 1;
|
||||||
|
|
||||||
|
// If dimensions are still 0, use the original image dimensions
|
||||||
|
const width = containerWidth || parseInt(img.getAttribute('data-original-width'));
|
||||||
|
const height = containerHeight || parseInt(img.getAttribute('data-original-height'));
|
||||||
|
|
||||||
|
const optimalSize = getOptimalThumbnailSize(
|
||||||
|
width * devicePixelRatio,
|
||||||
|
height * devicePixelRatio
|
||||||
|
);
|
||||||
|
|
||||||
|
const newSrc = img.getAttribute('data-base-src').replace('1536_', `${optimalSize}_`);
|
||||||
|
|
||||||
|
if (newSrc !== img.src) {
|
||||||
|
const tempImg = new Image();
|
||||||
|
tempImg.onload = function() {
|
||||||
|
img.src = newSrc;
|
||||||
|
img.style.opacity = 1;
|
||||||
|
};
|
||||||
|
tempImg.src = newSrc;
|
||||||
|
img.style.opacity = 0.5;
|
||||||
|
}
|
||||||
|
}, 100); // 100ms delay
|
||||||
|
}
|
||||||
|
|
||||||
function handleResize() {
|
function handleResize() {
|
||||||
const polaroids = document.querySelectorAll('.polaroid');
|
const polaroids = document.querySelectorAll('.polaroid');
|
||||||
polaroids.forEach(polaroid => {
|
polaroids.forEach(polaroid => {
|
||||||
@ -238,6 +280,7 @@
|
|||||||
const width = parseInt(img.getAttribute('data-original-width'));
|
const width = parseInt(img.getAttribute('data-original-width'));
|
||||||
const height = parseInt(img.getAttribute('data-original-height'));
|
const height = parseInt(img.getAttribute('data-original-height'));
|
||||||
positionPolaroid(polaroid, { width, height });
|
positionPolaroid(polaroid, { width, height });
|
||||||
|
loadOptimalThumbnail(img);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -255,6 +298,7 @@
|
|||||||
const polaroidElement = createPolaroid(polaroid);
|
const polaroidElement = createPolaroid(polaroid);
|
||||||
positionPolaroid(polaroidElement, polaroid);
|
positionPolaroid(polaroidElement, polaroid);
|
||||||
gridContainer.appendChild(polaroidElement);
|
gridContainer.appendChild(polaroidElement);
|
||||||
|
// loadOptimalThumbnail is now called in the img.onload event
|
||||||
});
|
});
|
||||||
|
|
||||||
hasMore = data.hasMore;
|
hasMore = data.hasMore;
|
||||||
@ -274,6 +318,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
window.addEventListener('scroll', handleScroll);
|
window.addEventListener('scroll', handleScroll);
|
||||||
|
window.addEventListener('resize', handleResize);
|
||||||
|
|
||||||
loadImages(); // Initial load
|
loadImages(); // Initial load
|
||||||
</script>
|
</script>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user