Fixed image dynamic scrolling not working with DriveCache = true
Some checks failed
Run Integration Tests / test (push) Failing after 2m13s
Some checks failed
Run Integration Tests / test (push) Failing after 2m13s
This commit is contained in:
parent
9420810092
commit
4c2edf2f81
1 changed files with 13 additions and 19 deletions
|
@ -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;
|
||||
});
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue