mirrors/searxng
1
0
Fork 0
mirror of https://github.com/searxng/searxng.git synced 2024-06-25 16:40:42 +00:00
Code Issues Projects Releases Wiki Activity

Merge pull request #573 from return42/img-lazy

Browse source 
[fix] lazy loading of <img> tags
This commit is contained in:
Markus Heiser 2021-12-15 13:28:40 +01:00 committed by GitHub
parent da1f970eb5 715f578cda
commit ff48a41af0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
12 changed files with 17 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
searx/static/themes/oscar/css/logicodev-dark.min.css.map
View file

File diff suppressed because one or more lines are too long

8
searx/static/themes/oscar/js/searxng.js
View file

@ -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 () {

2
searx/static/themes/oscar/js/searxng.min.js.map
View file

File diff suppressed because one or more lines are too long

2
searx/static/themes/simple/css/searxng-rtl.min.css vendored
View file

File diff suppressed because one or more lines are too long

2
searx/static/themes/simple/css/searxng-rtl.min.css.map
View file

File diff suppressed because one or more lines are too long

2
searx/static/themes/simple/css/searxng.min.css vendored
View file

File diff suppressed because one or more lines are too long

2
searx/static/themes/simple/css/searxng.min.css.map
View file

File diff suppressed because one or more lines are too long

2
searx/static/themes/simple/js/searxng.head.min.js.map
View file

@ -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"}

2
searx/static/themes/simple/js/searxng.min.js.map
View file

File diff suppressed because one or more lines are too long

1
searx/static/themes/simple/src/less/style.less
View file

@ -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 {

4
searx/templates/simple/macros.html
View file

@ -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 -%}

4
searx/templates/simple/result_templates/images.html
View file

@ -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">{{- "" -}}