From 1acd1c0cab6f032b068c67975d7111f02a8c2fea Mon Sep 17 00:00:00 2001 From: partisan Date: Wed, 26 Mar 2025 20:27:07 +0100 Subject: [PATCH] Fixed image dynamic scrolling not working with DriveCache = true --- static/js/dynamicscrollingimages.js | 173 ++++++++++------------------ 1 file changed, 64 insertions(+), 109 deletions(-) diff --git a/static/js/dynamicscrollingimages.js b/static/js/dynamicscrollingimages.js index 6969a53..d6eb3e7 100644 --- a/static/js/dynamicscrollingimages.js +++ b/static/js/dynamicscrollingimages.js @@ -1,197 +1,152 @@ (function() { // Configuration - const imageStatusInterval = 500; // Interval in milliseconds to check image status - const scrollThreshold = 500; // Distance from bottom of the page to trigger loading + const imageStatusInterval = 500; + const scrollThreshold = 500; const loadingIndicator = document.getElementById('message-bottom-left'); let loadingTimer; let isFetching = false; let page = parseInt(document.getElementById('template-data').getAttribute('data-page')) || 1; let query = document.getElementById('template-data').getAttribute('data-query'); let hardCacheEnabled = document.getElementById('template-data').getAttribute('data-hard-cache-enabled') === 'true'; - let noMoreImages = false; // Flag to indicate if there are no more images to load + let noMoreImages = false; let imageElements = []; let imageIds = []; + let imageStatusTimer; - /** - * Function to handle image load errors with retry logic - * @param {HTMLElement} imgElement - The image element that failed to load - * @param {number} retryCount - Number of retries left - * @param {number} retryDelay - Delay between retries in milliseconds - */ function handleImageError(imgElement, retryCount = 3, retryDelay = 1000) { if (retryCount > 0) { setTimeout(() => { imgElement.src = imgElement.getAttribute('data-full'); - imgElement.onerror = function() { - handleImageError(imgElement, retryCount - 1, retryDelay); - }; + imgElement.onerror = () => handleImageError(imgElement, retryCount - 1, retryDelay); }, retryDelay); } else { - // After retries, hide the image container or set a fallback image - console.warn('Image failed to load after retries:', imgElement.getAttribute('data-full')); - imgElement.parentElement.style.display = 'none'; // Hide the image container - // Alternatively, set a fallback image: - // imgElement.src = '/static/images/fallback.svg'; + console.warn('Image failed to load:', imgElement.getAttribute('data-full')); + imgElement.parentElement.style.display = 'none'; } } - /** - * Function to ensure the page is scrollable by loading more images if necessary - */ function ensureScrollable() { - if (noMoreImages) return; // Do not attempt if no more images are available - // Check if the page is not scrollable + if (noMoreImages) return; if (document.body.scrollHeight <= window.innerHeight) { - // If not scrollable, fetch the next page fetchNextPage(); } } - /** - * Function to fetch the next page of images - */ function fetchNextPage() { if (isFetching || noMoreImages) return; - - // Start the timer for loading indicator loadingTimer = setTimeout(() => { loadingIndicator.style.display = 'flex'; }, 150); - isFetching = true; page += 1; - + fetch(`/search?q=${encodeURIComponent(query)}&t=image&p=${page}&ajax=true`) .then(response => response.text()) .then(html => { - clearTimeout(loadingTimer); // Clear the timer if fetch is successful - loadingIndicator.style.display = 'none'; // Hide the loading indicator - - let parser = new DOMParser(); - let doc = parser.parseFromString(html, 'text/html'); - let newImages = doc.querySelectorAll('.image'); - + clearTimeout(loadingTimer); + loadingIndicator.style.display = 'none'; + + let tempDiv = document.createElement('div'); + tempDiv.innerHTML = html; + let newImages = tempDiv.querySelectorAll('.image'); + if (newImages.length > 0) { let resultsContainer = document.querySelector('.images'); newImages.forEach(imageDiv => { - // Append new images to the container - resultsContainer.appendChild(imageDiv); + let clonedImageDiv = imageDiv.cloneNode(true); + resultsContainer.appendChild(clonedImageDiv); - // Get the img element - let img = imageDiv.querySelector('img'); - if (img) { - let id = img.getAttribute('data-id'); - if (id) { - imageElements.push(img); - imageIds.push(id); - } + let img = clonedImageDiv.querySelector('img'); + if (img && img.getAttribute('data-id')) { if (hardCacheEnabled) { - // Replace image with placeholder img.src = '/static/images/placeholder.svg'; - img.onerror = function() { - handleImageError(img); - }; + img.onerror = () => handleImageError(img); + imageElements.push(img); + imageIds.push(img.getAttribute('data-id')); } else { - // HardCacheEnabled is false; load images immediately img.src = img.getAttribute('data-full'); - img.onerror = function() { - handleImageError(img); - }; + img.onerror = () => handleImageError(img); } } }); + if (hardCacheEnabled) { - checkImageStatus(); + checkImageStatus(); // Immediately check status for new images } - // After appending new images, ensure the page is scrollable ensureScrollable(); } else { - // No more images to load noMoreImages = true; } isFetching = false; }) .catch(error => { - clearTimeout(loadingTimer); // Clear the timer if fetch fails - loadingIndicator.style.display = 'none'; // Hide the loading indicator - console.error('Error fetching next page:', error); + clearTimeout(loadingTimer); + loadingIndicator.style.display = 'none'; + console.error('Fetch error:', error); isFetching = false; }); } - /** - * Function to check image status via AJAX - */ function checkImageStatus() { - if (!hardCacheEnabled) return; - if (imageIds.length === 0) { - // No images to check, do nothing - return; - } + if (!hardCacheEnabled || imageIds.length === 0) return; - // Send AJAX request to check image status fetch(`/image_status?image_ids=${imageIds.join(',')}`) .then(response => response.json()) .then(statusMap => { - imageElements = imageElements.filter(img => { - let id = img.getAttribute('data-id'); + const pendingImages = []; + const pendingIds = []; + + imageElements.forEach(img => { + const id = img.getAttribute('data-id'); if (statusMap[id]) { - // Image is ready, update src img.src = statusMap[id]; - img.onerror = function() { - handleImageError(img); - }; - // Remove the image id from the list - imageIds = imageIds.filter(imageId => imageId !== id); - return false; // Remove img from imageElements + img.onerror = () => handleImageError(img); + } else { + pendingImages.push(img); + pendingIds.push(id); } - return true; // Keep img in imageElements }); - // After updating images, ensure the page is scrollable + + imageElements = pendingImages; + imageIds = pendingIds; ensureScrollable(); }) .catch(error => { - console.error('Error checking image status:', error); + console.error('Status check error:', error); }); } - // Initialize imageElements and imageIds - imageElements = Array.from(document.querySelectorAll('img[data-id]')); - imageIds = imageElements - .map(img => img.getAttribute('data-id')) - .filter(id => id); // Exclude empty IDs + // Initialize + document.querySelectorAll('img[data-id]').forEach(img => { + const id = img.getAttribute('data-id'); + if (id) { + imageElements.push(img); + imageIds.push(id); + if (hardCacheEnabled) { + img.src = '/static/images/placeholder.svg'; + } else { + img.src = img.getAttribute('data-full'); + } + img.onerror = () => handleImageError(img); + } + }); if (hardCacheEnabled) { - // Replace images with placeholders - imageElements.forEach(img => { - img.src = '/static/images/placeholder.svg'; - }); - - // Start checking image status - let imageStatusTimer = setInterval(checkImageStatus, imageStatusInterval); - checkImageStatus(); // Initial check - } else { - // HardCacheEnabled is false; load images immediately - imageElements.forEach(img => { - img.src = img.getAttribute('data-full'); - img.onerror = function() { - handleImageError(img); - }; - }); + imageStatusTimer = setInterval(checkImageStatus, imageStatusInterval); + checkImageStatus(); } - // After initial images are loaded, ensure the page is scrollable window.addEventListener('load', ensureScrollable); - - // Infinite scrolling - window.addEventListener('scroll', function() { + window.addEventListener('scroll', () => { if (isFetching || noMoreImages) return; - if (window.innerHeight + window.scrollY >= document.body.offsetHeight - scrollThreshold) { - // User scrolled near the bottom fetchNextPage(); } }); + // Cleanup + window.addEventListener('beforeunload', () => { + if (imageStatusTimer) clearInterval(imageStatusTimer); + }); })(); \ No newline at end of file