Merge pull request #573 from return42/img-lazy

[fix] lazy loading of <img> tags

searx/static/themes/oscar/js/searxng.js

@@ -341,7 +341,7 @@ $(document).ready(function(){
 
 
 (function (w, d) {
-  function ImageLayout(container_selector, results_selector, img_selector, verticalMargin, horizontalMargin, maxHeight) {
+  function ImageLayout (container_selector, results_selector, img_selector, verticalMargin, horizontalMargin, maxHeight) {
     this.container_selector = container_selector;
     this.results_selector = results_selector;
     this.img_selector = img_selector;
@@ -376,7 +376,7 @@ $(document).ready(function(){
       }
     }
 
-    return (width - images.length * this.verticalMargin) / r; //have to round down because Firefox will automatically roundup value with number of decimals > 3
+    return (width - images.length * this.verticalMargin) / r; // have to round down because Firefox will automatically roundup value with number of decimals > 3
   };
 
   ImageLayout.prototype._setSize = function (images, height) {
@@ -466,12 +466,12 @@ $(document).ready(function(){
     var results_nodes = d.querySelectorAll(this.results_selector);
     var results_length = results_nodes.length;
 
-    function img_load_error(event) {
+    function img_load_error (event) {
       // console.log("ERROR can't load: " + event.originalTarget.src);
       event.originalTarget.src = w.searxng.static_path + w.searxng.theme.img_load_error;
     }
 
-    function throttleAlign() {
+    function throttleAlign () {
       if (obj.isAlignDone) {
         obj.isAlignDone = false;
         setTimeout(function () {

searx/static/themes/simple/js/searxng.head.min.js.map

@@ -1 +1 @@
-{"version":3,"file":"searxng.head.min.js","sources":["../src/js/head/00_init.js"],"sourcesContent":["/**\n * @license\n * (C) Copyright Contributors to the SearXNG project.\n * (C) Copyright Contributors to the searx project (2014 - 2021).\n * SPDX-License-Identifier: AGPL-3.0-or-later\n */\n/* global DocumentTouch:readonly */\n(function(w, d) {\n    'use strict';\n\n    // add data- properties\n    var script = d.currentScript  || (function() {\n        var scripts = d.getElementsByTagName('script');\n        return scripts[scripts.length - 1];\n    })();\n\n    // try to detect touch screen\n    w.searxng = {\n        touch: ((\"ontouchstart\" in w) || w.DocumentTouch && document instanceof DocumentTouch) || false,\n        method: script.getAttribute('data-method'),\n        autocompleter: script.getAttribute('data-autocompleter') === 'true',\n        search_on_category_select: script.getAttribute('data-search-on-category-select') === 'true',\n        infinite_scroll: script.getAttribute('data-infinite-scroll') === 'true',\n        hotkeys: script.getAttribute('data-hotkeys') === 'true',\n        static_path: script.getAttribute('data-static-path'),\n        translations: JSON.parse(script.getAttribute('data-translations')),\n        theme : {\n            // image that is displayed if load of <img src='...'> failed\n            img_load_error: 'img/img_load_error.svg'\n        }\n    };\n\n    // update the css\n    var hmtlElement = d.getElementsByTagName(\"html\")[0];\n    hmtlElement.classList.remove('no-js');\n    hmtlElement.classList.add('js');\n    if (w.searxng.touch) {\n        hmtlElement.classList.add('touch');\n    }\n})(window, document);"],"names":["w","d","script","currentScript","scripts","getElementsByTagName","length","searxng","touch","DocumentTouch","document","method","getAttribute","autocompleter","search_on_category_select","infinite_scroll","hotkeys","static_path","translations","JSON","parse","theme","img_load_error","hmtlElement","classList","remove","add","window"],"mappings":";;;;;;CAOA,SAAUA,EAAGC,gBAIT,IAAIC,EAASD,EAAEE,eAAkB,WAC7B,IAAIC,EAAUH,EAAEI,qBAAqB,UACrC,OAAOD,EAAQA,EAAQE,OAAS,GAFH,GAMjCN,EAAEO,QAAU,CACRC,MAAS,iBAAkBR,GAAMA,EAAES,eAAiBC,oBAAoBD,eAAkB,MAC1FE,OAAQT,EAAOU,aAAa,eAC5BC,cAAeX,EAAOU,aAAa,wBAA0B,OAC7DE,0BAA2BZ,EAAOU,aAAa,oCAAsC,OACrFG,gBAAiBb,EAAOU,aAAa,0BAA4B,OACjEI,QAASd,EAAOU,aAAa,kBAAoB,OACjDK,YAAaf,EAAOU,aAAa,oBACjCM,aAAcC,KAAKC,MAAMlB,EAAOU,aAAa,sBAC7CS,MAAQ,CAEJC,eAAgB,2BAKxB,IAAIC,EAActB,EAAEI,qBAAqB,QAAQ,GACjDkB,EAAYC,UAAUC,OAAO,SAC7BF,EAAYC,UAAUE,IAAI,MAC1B,GAAI1B,EAAEO,QAAQC,MAAO,CACjBe,EAAYC,UAAUE,IAAI,WA9BlC,CAgCGC,OAAQjB"}
+{"version":3,"file":"searxng.head.min.js","sources":["../src/js/head/00_init.js"],"sourcesContent":["/**\n * @license\n * (C) Copyright Contributors to the SearXNG project.\n * (C) Copyright Contributors to the searx project (2014 - 2021).\n * SPDX-License-Identifier: AGPL-3.0-or-later\n */\n/* global DocumentTouch:readonly */\n(function (w, d) {\n  'use strict';\n\n  // add data- properties\n  var script = d.currentScript  || (function () {\n    var scripts = d.getElementsByTagName('script');\n    return scripts[scripts.length - 1];\n  })();\n\n  // try to detect touch screen\n  w.searxng = {\n    touch: ((\"ontouchstart\" in w) || w.DocumentTouch && document instanceof DocumentTouch) || false,\n    method: script.getAttribute('data-method'),\n    autocompleter: script.getAttribute('data-autocompleter') === 'true',\n    search_on_category_select: script.getAttribute('data-search-on-category-select') === 'true',\n    infinite_scroll: script.getAttribute('data-infinite-scroll') === 'true',\n    hotkeys: script.getAttribute('data-hotkeys') === 'true',\n    static_path: script.getAttribute('data-static-path'),\n    translations: JSON.parse(script.getAttribute('data-translations')),\n    theme: {\n      // image that is displayed if load of <img src='...'> failed\n      img_load_error: 'img/img_load_error.svg'\n    }\n  };\n\n  // update the css\n  var hmtlElement = d.getElementsByTagName(\"html\")[0];\n  hmtlElement.classList.remove('no-js');\n  hmtlElement.classList.add('js');\n  if (w.searxng.touch) {\n    hmtlElement.classList.add('touch');\n  }\n})(window, document);"],"names":["w","d","script","currentScript","scripts","getElementsByTagName","length","searxng","touch","DocumentTouch","document","method","getAttribute","autocompleter","search_on_category_select","infinite_scroll","hotkeys","static_path","translations","JSON","parse","theme","img_load_error","hmtlElement","classList","remove","add","window"],"mappings":";;;;;;CAOA,SAAWA,EAAGC,gBAIZ,IAAIC,EAASD,EAAEE,eAAkB,WAC/B,IAAIC,EAAUH,EAAEI,qBAAqB,UACrC,OAAOD,EAAQA,EAAQE,OAAS,GAFD,GAMjCN,EAAEO,QAAU,CACVC,MAAS,iBAAkBR,GAAMA,EAAES,eAAiBC,oBAAoBD,eAAkB,MAC1FE,OAAQT,EAAOU,aAAa,eAC5BC,cAAeX,EAAOU,aAAa,wBAA0B,OAC7DE,0BAA2BZ,EAAOU,aAAa,oCAAsC,OACrFG,gBAAiBb,EAAOU,aAAa,0BAA4B,OACjEI,QAASd,EAAOU,aAAa,kBAAoB,OACjDK,YAAaf,EAAOU,aAAa,oBACjCM,aAAcC,KAAKC,MAAMlB,EAAOU,aAAa,sBAC7CS,MAAO,CAELC,eAAgB,2BAKpB,IAAIC,EAActB,EAAEI,qBAAqB,QAAQ,GACjDkB,EAAYC,UAAUC,OAAO,SAC7BF,EAAYC,UAAUE,IAAI,MAC1B,GAAI1B,EAAEO,QAAQC,MAAO,CACnBe,EAAYC,UAAUE,IAAI,WA9B9B,CAgCGC,OAAQjB"}

searx/static/themes/simple/src/less/style.less

@@ -267,6 +267,7 @@ article[data-vim-selected].category-social {
       float: left;
       padding: 0.6rem 1rem 0 0;
       width: 20rem;
+      height: unset; // remove heigth value that was needed for lazy loading
     }
 
     &.image {

searx/templates/simple/macros.html

@@ -23,8 +23,8 @@
   <span class="url_o{{loop.index}}"><span class="url_i{{loop.index}}">{{- part -}}</span></span>
   {%- endfor %}
   {{- result_close_link() -}}
-  {%- if result.img_src %}{{ result_open_link(result.url) }}<img class="image" src="{{ image_proxify(result.img_src) }}" title="{{ result.title|striptags }}">{{ result_close_link() }}{% endif -%}
+  {%- if result.img_src %}{{ result_open_link(result.url) }}<img class="image" src="{{ image_proxify(result.img_src) }}" title="{{ result.title|striptags }}" loading="lazy" width="200" height="200">{{ result_close_link() }}{% endif -%}
-  {%- if result.thumbnail %}{{ result_open_link(result.url) }}<img class="thumbnail" src="{{ image_proxify(result.thumbnail) }}" title="{{ result.title|striptags }}">{{ result_close_link() }}{% endif -%}
+  {%- if result.thumbnail %}{{ result_open_link(result.url) }}<img class="thumbnail" src="{{ image_proxify(result.thumbnail) }}" title="{{ result.title|striptags }}" loading="lazy" width="200" height="200">{{ result_close_link() }}{% endif -%}
   <h3>{{ result_link(result.url, result.title|safe) }}</h3>
 {%- endmacro -%}
 

searx/templates/simple/result_templates/images.html

@@ -1,6 +1,6 @@
 <article class="result result-images {% if result['category'] %}category-{{ result['category'] }}{% endif %}">{{- "" -}}
         <a {% if results_on_new_tab %}target="_blank" rel="noopener noreferrer"{% else %}rel="noreferrer"{% endif %} href="{{ result.img_src }}">{{- "" -}}
-                <img class="image_thumbnail" {% if results_on_new_tab %}target="_blank" rel="noopener noreferrer"{% else %}rel="noreferrer"{% endif %} src="{% if result.thumbnail_src %}{{ image_proxify(result.thumbnail_src) }}{% else %}{{ image_proxify(result.img_src) }}{% endif %}" loading="lazy" alt="{{ result.title|striptags }}">{{- "" -}}
+                <img class="image_thumbnail" {% if results_on_new_tab %}target="_blank" rel="noopener noreferrer"{% else %}rel="noreferrer"{% endif %} src="{% if result.thumbnail_src %}{{ image_proxify(result.thumbnail_src) }}{% else %}{{ image_proxify(result.img_src) }}{% endif %}" alt="{{ result.title|striptags }}" loading="lazy" width="200" height="200">{{- "" -}}
                 <span class="title">{{ result.title|striptags }}</span>{{- "" -}}
         </a>{{- "" -}}
         <div class="detail">{{- "" -}}
@@ -11,7 +11,7 @@
                         {%- if result.thumbnail_src -%}
                                 <img src="" data-src="{{ image_proxify(result.img_src) }}" alt="{{ result.title|striptags }}">
                         {%- else -%}
-                                <img src="{{ image_proxify(result.img_src) }}" alt="{{ result.title|striptags }}" loading="lazy">
+                                <img src="{{ image_proxify(result.img_src) }}" alt="{{ result.title|striptags }}" loading="lazy" width="200" height="200">
                         {%- endif -%}
                 </a>{{- "" -}}
                 <div class="result-images-labels">{{- "" -}}