class ArtworkImageLoader { constructor(containerSelector) { this.containers = document.querySelectorAll(containerSelector); this.init(); } init() { this.containers.forEach(container => { const img = container.querySelector('img'); const placeholder = document.createElement('div'); placeholder.className = 'bg-gray-200 absolute inset-0 flex items-center justify-center'; placeholder.innerHTML = '<i class="fa fa-image text-gray-400 text-2xl"></i>'; container.style.position = 'relative'; container.appendChild(placeholder); img.style.opacity = '0'; img.style.transition = 'opacity 0.5s ease-in-out'; const thumbnail = new Image(); const thumbnailSrc = img.dataset.thumbnail || this.getThumbnailUrl(img.src); thumbnail.onload = () => { placeholder.style.backgroundImage = `url(${thumbnailSrc})`; placeholder.style.backgroundSize = 'cover'; placeholder.style.backgroundPosition = 'center'; placeholder.innerHTML = ''; img.onload = () => { img.style.opacity = '1'; setTimeout(() => placeholder.remove(), 500); }; img.src = img.dataset.src || img.src; }; thumbnail.src = thumbnailSrc; }); } getThumbnailUrl(originalUrl) { return originalUrl.replace(/(\.\w+)$/, '_thumbnail$1'); } } document.addEventListener('DOMContentLoaded', () => { new ArtworkImageLoader('.artwork-grid [data-artwork-id] .aspect-\\[4\\/5\\]'); });