[refactor] results.js: cancel image loading after next one selected

Browse Source
This commit is contained in:
Bnyro 2025-01-20 18:03:10 +01:00
parent 8731e37796
commit 8ab165c5b1
1 changed files with 29 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
searx/static/themes/simple/src/js/main/results.js
View File

@ -52,35 +52,43 @@
this.innerText = this.dataset.copiedText; this.innerText = this.dataset.copiedText;
}); });
const isMobile = screen.orientation.type.startsWith('portrait'); // progress spinner that is being attached while an image is loading
const imgLoaderSpinner = d.createElement('div');
imgLoaderSpinner.classList.add('loader');
const imgLoader = new Image();
const loadImage = (imgSrc, onSuccess) => {
imgLoader.onload = () => {
onSuccess();
imgLoaderSpinner.remove();
};
imgLoader.onerror = () => {
imgLoaderSpinner.remove();
};
imgLoader.src = imgSrc;
}
searxng.selectImage = function (resultElement) { searxng.selectImage = function (resultElement) {
/* eslint no-unused-vars: 0 */ /* eslint no-unused-vars: 0 */
if (resultElement) { if (resultElement) {
// load full size image in background // load full size image in background
const imgElement = resultElement.querySelector('.result-images-source img');
const thumbnailElement = resultElement.querySelector('.image_thumbnail'); const thumbnailElement = resultElement.querySelector('.image_thumbnail');
const detailElement = resultElement.querySelector('.detail'); const detailElement = resultElement.querySelector('.detail');
if (imgElement) { const imgElement = resultElement.querySelector('.result-images-source img');
if (!imgElement) return;
const imgSrc = imgElement.getAttribute('data-src'); const imgSrc = imgElement.getAttribute('data-src');
if (imgSrc) { // already loaded high-res image or no high-res image available
const loader = d.createElement('div'); if (!imgSrc) return;
const imgLoader = new Image();
loader.classList.add('loader'); // show a progress spinner and start loading the full high-res image
detailElement.appendChild(loader); detailElement.appendChild(imgLoaderSpinner);
loadImage(imgSrc, () => {
imgLoader.onload = e => {
imgElement.src = imgSrc; imgElement.src = imgSrc;
loader.remove();
};
imgLoader.onerror = e => {
loader.remove();
};
imgLoader.src = imgSrc;
imgElement.src = thumbnailElement.src;
imgElement.removeAttribute('data-src'); imgElement.removeAttribute('data-src');
} })
}
// use the image thumbnail until the image is fully loaded
imgElement.src = thumbnailElement.src;
} }
d.getElementById('results').classList.add('image-detail-open'); d.getElementById('results').classList.add('image-detail-open');