parch-search/Gitee
3
0
Fork 0
mirror of https://github.com/parchlinuxB/Gitee.git synced 2025-02-22 18:05:44 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

[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 c1fcee9d9f
commit cf4e183790
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;
});
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) {
/* eslint no-unused-vars: 0 */
if (resultElement) {
// load full size image in background
const imgElement = resultElement.querySelector('.result-images-source img');
const thumbnailElement = resultElement.querySelector('.image_thumbnail');
const detailElement = resultElement.querySelector('.detail');
if (imgElement) {
const imgElement = resultElement.querySelector('.result-images-source img');
if (!imgElement) return;
const imgSrc = imgElement.getAttribute('data-src');
if (imgSrc) {
const loader = d.createElement('div');
const imgLoader = new Image();
// already loaded high-res image or no high-res image available
if (!imgSrc) return;
loader.classList.add('loader');
detailElement.appendChild(loader);
imgLoader.onload = e => {
// show a progress spinner and start loading the full high-res image
detailElement.appendChild(imgLoaderSpinner);
loadImage(imgSrc, () => {
imgElement.src = imgSrc;
loader.remove();
};
imgLoader.onerror = e => {
loader.remove();
};
imgLoader.src = imgSrc;
imgElement.src = thumbnailElement.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');