Spitfire/Search
Spitfire/Search
1
0
Fork 0
Code Issues 9 Pull requests Projects Releases Packages Wiki Activity Actions

Fixed image dynamic scrolling not working with DriveCache = true
Some checks failed
Run Integration Tests / test (push) Failing after 38s
Details

Browse source
This commit is contained in:
partisan 2025-03-26 20:27:07 +01:00
parent 9420810092
commit 1acd1c0cab
1 changed files with 64 additions and 109 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

167
static/js/dynamicscrollingimages.js
View file

@ -1,197 +1,152 @@
(function() { (function() {
// Configuration // Configuration
const imageStatusInterval = 500; // Interval in milliseconds to check image status const imageStatusInterval = 500;
const scrollThreshold = 500; // Distance from bottom of the page to trigger loading const scrollThreshold = 500;
const loadingIndicator = document.getElementById('message-bottom-left'); const loadingIndicator = document.getElementById('message-bottom-left');
let loadingTimer; let loadingTimer;
let isFetching = false; let isFetching = false;
let page = parseInt(document.getElementById('template-data').getAttribute('data-page')) || 1; let page = parseInt(document.getElementById('template-data').getAttribute('data-page')) || 1;
let query = document.getElementById('template-data').getAttribute('data-query'); let query = document.getElementById('template-data').getAttribute('data-query');
let hardCacheEnabled = document.getElementById('template-data').getAttribute('data-hard-cache-enabled') === 'true'; 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 imageElements = [];
let imageIds = []; 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) { function handleImageError(imgElement, retryCount = 3, retryDelay = 1000) {
if (retryCount > 0) { if (retryCount > 0) {
setTimeout(() => { setTimeout(() => {
imgElement.src = imgElement.getAttribute('data-full'); imgElement.src = imgElement.getAttribute('data-full');
imgElement.onerror = function() { imgElement.onerror = () => handleImageError(imgElement, retryCount - 1, retryDelay);
handleImageError(imgElement, retryCount - 1, retryDelay);
};
}, retryDelay); }, retryDelay);
} else { } else {
// After retries, hide the image container or set a fallback image console.warn('Image failed to load:', imgElement.getAttribute('data-full'));
console.warn('Image failed to load after retries:', imgElement.getAttribute('data-full')); imgElement.parentElement.style.display = 'none';
imgElement.parentElement.style.display = 'none'; // Hide the image container
// Alternatively, set a fallback image:
// imgElement.src = '/static/images/fallback.svg';
} }
} }
/**
* Function to ensure the page is scrollable by loading more images if necessary
*/
function ensureScrollable() { function ensureScrollable() {
if (noMoreImages) return; // Do not attempt if no more images are available if (noMoreImages) return;
// Check if the page is not scrollable
if (document.body.scrollHeight <= window.innerHeight) { if (document.body.scrollHeight <= window.innerHeight) {
// If not scrollable, fetch the next page
fetchNextPage(); fetchNextPage();
} }
} }
/**
* Function to fetch the next page of images
*/
function fetchNextPage() { function fetchNextPage() {
if (isFetching || noMoreImages) return; if (isFetching || noMoreImages) return;
// Start the timer for loading indicator
loadingTimer = setTimeout(() => { loadingTimer = setTimeout(() => {
loadingIndicator.style.display = 'flex'; loadingIndicator.style.display = 'flex';
}, 150); }, 150);
isFetching = true; isFetching = true;
page += 1; page += 1;
fetch(`/search?q=${encodeURIComponent(query)}&t=image&p=${page}&ajax=true`) fetch(`/search?q=${encodeURIComponent(query)}&t=image&p=${page}&ajax=true`)
.then(response => response.text()) .then(response => response.text())
.then(html => { .then(html => {
clearTimeout(loadingTimer); // Clear the timer if fetch is successful clearTimeout(loadingTimer);
loadingIndicator.style.display = 'none'; // Hide the loading indicator loadingIndicator.style.display = 'none';
let parser = new DOMParser(); let tempDiv = document.createElement('div');
let doc = parser.parseFromString(html, 'text/html'); tempDiv.innerHTML = html;
let newImages = doc.querySelectorAll('.image'); let newImages = tempDiv.querySelectorAll('.image');
if (newImages.length > 0) { if (newImages.length > 0) {
let resultsContainer = document.querySelector('.images'); let resultsContainer = document.querySelector('.images');
newImages.forEach(imageDiv => { newImages.forEach(imageDiv => {
// Append new images to the container let clonedImageDiv = imageDiv.cloneNode(true);
resultsContainer.appendChild(imageDiv); resultsContainer.appendChild(clonedImageDiv);
// Get the img element let img = clonedImageDiv.querySelector('img');
let img = imageDiv.querySelector('img'); if (img && img.getAttribute('data-id')) {
if (img) {
let id = img.getAttribute('data-id');
if (id) {
imageElements.push(img);
imageIds.push(id);
}
if (hardCacheEnabled) { if (hardCacheEnabled) {
// Replace image with placeholder
img.src = '/static/images/placeholder.svg'; img.src = '/static/images/placeholder.svg';
img.onerror = function() { img.onerror = () => handleImageError(img);
handleImageError(img); imageElements.push(img);
}; imageIds.push(img.getAttribute('data-id'));
} else { } else {
// HardCacheEnabled is false; load images immediately
img.src = img.getAttribute('data-full'); img.src = img.getAttribute('data-full');
img.onerror = function() { img.onerror = () => handleImageError(img);
handleImageError(img);
};
} }
} }
}); });
if (hardCacheEnabled) { if (hardCacheEnabled) {
checkImageStatus(); checkImageStatus(); // Immediately check status for new images
} }
// After appending new images, ensure the page is scrollable
ensureScrollable(); ensureScrollable();
} else { } else {
// No more images to load
noMoreImages = true; noMoreImages = true;
} }
isFetching = false; isFetching = false;
}) })
.catch(error => { .catch(error => {
clearTimeout(loadingTimer); // Clear the timer if fetch fails clearTimeout(loadingTimer);
loadingIndicator.style.display = 'none'; // Hide the loading indicator loadingIndicator.style.display = 'none';
console.error('Error fetching next page:', error); console.error('Fetch error:', error);
isFetching = false; isFetching = false;
}); });
} }
/**
* Function to check image status via AJAX
*/
function checkImageStatus() { function checkImageStatus() {
if (!hardCacheEnabled) return; if (!hardCacheEnabled || imageIds.length === 0) return;
if (imageIds.length === 0) {
// No images to check, do nothing
return;
}
// Send AJAX request to check image status
fetch(`/image_status?image_ids=${imageIds.join(',')}`) fetch(`/image_status?image_ids=${imageIds.join(',')}`)
.then(response => response.json()) .then(response => response.json())
.then(statusMap => { .then(statusMap => {
imageElements = imageElements.filter(img => { const pendingImages = [];
let id = img.getAttribute('data-id'); const pendingIds = [];
imageElements.forEach(img => {
const id = img.getAttribute('data-id');
if (statusMap[id]) { if (statusMap[id]) {
// Image is ready, update src
img.src = statusMap[id]; img.src = statusMap[id];
img.onerror = function() { img.onerror = () => handleImageError(img);
handleImageError(img); } else {
}; pendingImages.push(img);
// Remove the image id from the list pendingIds.push(id);
imageIds = imageIds.filter(imageId => imageId !== id);
return false; // Remove img from imageElements
} }
return true; // Keep img in imageElements
}); });
// After updating images, ensure the page is scrollable
imageElements = pendingImages;
imageIds = pendingIds;
ensureScrollable(); ensureScrollable();
}) })
.catch(error => { .catch(error => {
console.error('Error checking image status:', error); console.error('Status check error:', error);
}); });
} }
// Initialize imageElements and imageIds // Initialize
imageElements = Array.from(document.querySelectorAll('img[data-id]')); document.querySelectorAll('img[data-id]').forEach(img => {
imageIds = imageElements const id = img.getAttribute('data-id');
.map(img => img.getAttribute('data-id')) if (id) {
.filter(id => id); // Exclude empty IDs 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) { if (hardCacheEnabled) {
// Replace images with placeholders imageStatusTimer = setInterval(checkImageStatus, imageStatusInterval);
imageElements.forEach(img => { checkImageStatus();
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);
};
});
} }
// After initial images are loaded, ensure the page is scrollable
window.addEventListener('load', ensureScrollable); window.addEventListener('load', ensureScrollable);
window.addEventListener('scroll', () => {
// Infinite scrolling
window.addEventListener('scroll', function() {
if (isFetching || noMoreImages) return; if (isFetching || noMoreImages) return;
if (window.innerHeight + window.scrollY >= document.body.offsetHeight - scrollThreshold) { if (window.innerHeight + window.scrollY >= document.body.offsetHeight - scrollThreshold) {
// User scrolled near the bottom
fetchNextPage(); fetchNextPage();
} }
}); });
// Cleanup
window.addEventListener('beforeunload', () => {
if (imageStatusTimer) clearInterval(imageStatusTimer);
});
})(); })();