diff --git a/searx/static/themes/__common__/js/image_layout.js b/searx/static/themes/__common__/js/image_layout.js index 653da95a..e178c296 100644 --- a/searx/static/themes/__common__/js/image_layout.js +++ b/searx/static/themes/__common__/js/image_layout.js @@ -8,8 +8,19 @@ * * @license Free to use under the MIT License. * +* @example Example usage of searxng.ImageLayout class. +* searxng.image_thumbnail_layout = new searxng.ImageLayout( +* '#urls', // container_selector +* '#urls .result-images', // results_selector +* 'img.image_thumbnail', // img_selector +* 14, // verticalMargin +* 6, // horizontalMargin +* 200 // maxHeight +* ); +* searxng.image_thumbnail_layout.watch(); */ + (function (w, d) { function ImageLayout(container_selector, results_selector, img_selector, verticalMargin, horizontalMargin, maxHeight) { this.container_selector = container_selector; @@ -136,6 +147,11 @@ var results_nodes = d.querySelectorAll(this.results_selector); var results_length = results_nodes.length; + function img_load_error(event) { + // console.log("ERROR can't load: " + event.originalTarget.src); + event.originalTarget.src = window.searxng.static_path + 'img/img_load_error.svg'; + } + function throttleAlign() { if (obj.isAlignDone) { obj.isAlignDone = false; @@ -146,15 +162,20 @@ } } + // https://developer.mozilla.org/en-US/docs/Web/API/Window/pageshow_event w.addEventListener('pageshow', throttleAlign); + // https://developer.mozilla.org/en-US/docs/Web/API/FileReader/load_event w.addEventListener('load', throttleAlign); + // https://developer.mozilla.org/en-US/docs/Web/API/Window/resize_event w.addEventListener('resize', throttleAlign); for (i = 0; i < results_length; i++) { img = results_nodes[i].querySelector(this.img_selector); if (img !== null && img !== undefined) { img.addEventListener('load', throttleAlign); + // https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onerror img.addEventListener('error', throttleAlign); + img.addEventListener('error', img_load_error, {once: true}); } } }; diff --git a/searx/static/themes/simple/gruntfile.js b/searx/static/themes/simple/gruntfile.js index b7501c73..762ba108 100644 --- a/searx/static/themes/simple/gruntfile.js +++ b/searx/static/themes/simple/gruntfile.js @@ -164,8 +164,8 @@ module.exports = function(grunt) { favicon: { files: { 'img/favicon.png': '<%= _brand %>/searxng-wordmark.svg', - 'img/searxng.png': '<%= _brand %>/searxng.svg' - + 'img/searxng.png': '<%= _brand %>/searxng.svg', + 'img/img_load_error.svg': '<%= _brand %>/img_load_error.svg' } } }, diff --git a/src/brand/img_load_error.svg b/src/brand/img_load_error.svg new file mode 100644 index 00000000..4bd867c5 --- /dev/null +++ b/src/brand/img_load_error.svg @@ -0,0 +1,71 @@ + + + + + + + + image/svg+xml + + + + + + + + +