diff --git a/searx/static/themes/simple/src/js/main/results.js b/searx/static/themes/simple/src/js/main/results.js
index adde916ea..cc7c7efcd 100644
--- a/searx/static/themes/simple/src/js/main/results.js
+++ b/searx/static/themes/simple/src/js/main/results.js
@@ -52,12 +52,30 @@
this.innerText = this.dataset.copiedText;
});
- // progress spinner that is being attached while an image is loading
+ // searxng.selectImage (gallery)
+ // -----------------------------
+
+ // setTimeout() ID, needed to cancel *last* loadImage
+ let imgTimeoutID;
+
+ // progress spinner, while an image is loading
const imgLoaderSpinner = d.createElement('div');
imgLoaderSpinner.classList.add('loader');
+
+ // singleton image object, which is used for all loading processes of a
+ // detailed image
const imgLoader = new Image();
const loadImage = (imgSrc, onSuccess) => {
+ // if defered image load exists, stop defered task.
+ if (imgTimeoutID) clearTimeout(imgTimeoutID);
+
+ // defer load of the detail image for 1 sec
+ imgTimeoutID = setTimeout(() => {
+ imgLoader.src = imgSrc;
+ }, 1000);
+
+ // set handlers in the on-properties
imgLoader.onload = () => {
onSuccess();
imgLoaderSpinner.remove();
@@ -65,38 +83,49 @@
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 thumbnailElement = resultElement.querySelector('.image_thumbnail');
- const detailElement = resultElement.querySelector('.detail');
- const imgElement = resultElement.querySelector('.result-images-source img');
- if (!imgElement) return;
+ };
- const imgSrc = imgElement.getAttribute('data-src');
- // already loaded high-res image or no high-res image available
- if (!imgSrc) return;
+ searxng.selectImage = (resultElement) => {
- // show a progress spinner and start loading the full high-res image
- detailElement.appendChild(imgLoaderSpinner);
- loadImage(imgSrc, () => {
- imgElement.src = imgSrc;
- imgElement.removeAttribute('data-src');
- })
-
- // use the image thumbnail until the image is fully loaded
- imgElement.src = thumbnailElement.src;
- }
+ // add a class that can be evaluated in the CSS and indicates that the
+ // detail view is open
d.getElementById('results').classList.add('image-detail-open');
- // add a hash to the browser history so that pressing back doesn't return to the previous page
- // this allows us to dismiss the image details on pressing the back button on mobile devices
+ // add a hash to the browser history so that pressing back doesn't return
+ // to the previous page this allows us to dismiss the image details on
+ // pressing the back button on mobile devices
window.location.hash = '#image-viewer';
searxng.scrollPageToSelected();
+
+ // if there is none element given by the caller, stop here
+ if (!resultElement) return;
+
+ // find
object in the element, if there is none, stop here.
+ const img = resultElement.querySelector('.result-images-source img');
+ if (!img) return;
+
+ //
+ const src = img.getAttribute('data-src');
+
+ // already loaded high-res image or no high-res image available
+ if (!src) return;
+
+ // use the image thumbnail until the image is fully loaded
+ const thumbnail = resultElement.querySelector('.image_thumbnail');
+ img.src = thumbnail.src;
+
+ // show a progress spinner
+ const detailElement = resultElement.querySelector('.detail');
+ detailElement.appendChild(imgLoaderSpinner);
+
+ // load full size image in background
+ loadImage(src, () => {
+ // after the singelton loadImage has loaded the detail image into the
+ // cache, it can be used in the origin
as src property.
+ img.src = src;
+ img.removeAttribute('data-src');
+ });
};
searxng.closeDetail = function () {
@@ -125,10 +154,10 @@
d.querySelectorAll('.swipe-horizontal').forEach(
obj => {
- obj.addEventListener('swiped-left', function (e) {
+ obj.addEventListener('swiped-left', function () {
searxng.selectNext(false);
});
- obj.addEventListener('swiped-right', function (e) {
+ obj.addEventListener('swiped-right', function () {
searxng.selectPrevious(false);
});
}