Spitfire/Search
Spitfire/Search
1
0
Fork 0
Code Issues 6 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 2m13s
Details

Browse source
This commit is contained in:
partisan 2025-03-26 20:17:39 +01:00
parent 9420810092
commit 4c2edf2f81
1 changed files with 13 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

32
static/js/dynamicscrollingimages.js
View file

@ -53,33 +53,31 @@
*/ */
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(); // Use a temporary div to parse the HTML fragment
let doc = parser.parseFromString(html, 'text/html'); let tempDiv = document.createElement('div');
let newImages = doc.querySelectorAll('.image'); tempDiv.innerHTML = html;
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 // Clone the node to ensure it's part of the main document
resultsContainer.appendChild(imageDiv); let clonedImageDiv = imageDiv.cloneNode(true);
resultsContainer.appendChild(clonedImageDiv);
// Get the img element
let img = imageDiv.querySelector('img'); let img = clonedImageDiv.querySelector('img');
if (img) { if (img) {
let id = img.getAttribute('data-id'); let id = img.getAttribute('data-id');
if (id) { if (id) {
@ -87,13 +85,11 @@
imageIds.push(id); 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 = function() {
handleImageError(img); handleImageError(img);
}; };
} 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 = function() {
handleImageError(img); handleImageError(img);
@ -104,17 +100,15 @@
if (hardCacheEnabled) { if (hardCacheEnabled) {
checkImageStatus(); checkImageStatus();
} }
// 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('Error fetching next page:', error);
isFetching = false; isFetching = false;
}); });