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/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.thumbnail %}{{ result_open_link(result.url) }}<img class="thumbnail" src="{{ image_proxify(result.thumbnail) }}" 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 }}" 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">{{- "" -}}