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

This commit is contained in:
partisan 2025-03-26 20:17:39 +01:00
parent 9420810092
commit 4c2edf2f81

View file

@ -53,33 +53,31 @@
*/
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
clearTimeout(loadingTimer);
loadingIndicator.style.display = 'none';
let parser = new DOMParser();
let doc = parser.parseFromString(html, 'text/html');
let newImages = doc.querySelectorAll('.image');
// Use a temporary div to parse the HTML fragment
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);
// Clone the node to ensure it's part of the main document
let clonedImageDiv = imageDiv.cloneNode(true);
resultsContainer.appendChild(clonedImageDiv);
// Get the img element
let img = imageDiv.querySelector('img');
let img = clonedImageDiv.querySelector('img');
if (img) {
let id = img.getAttribute('data-id');
if (id) {
@ -87,13 +85,11 @@
imageIds.push(id);
}
if (hardCacheEnabled) {
// Replace image with placeholder
img.src = '/static/images/placeholder.svg';
img.onerror = function() {
handleImageError(img);
};
} else {
// HardCacheEnabled is false; load images immediately
img.src = img.getAttribute('data-full');
img.onerror = function() {
handleImageError(img);
@ -104,17 +100,15 @@
if (hardCacheEnabled) {
checkImageStatus();
}
// 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
clearTimeout(loadingTimer);
loadingIndicator.style.display = 'none';
console.error('Error fetching next page:', error);
isFetching = false;
});