mirror of
https://github.com/searxng/searxng.git
synced 2026-05-09 19:03:50 +02:00
Merge pull request #573 from return42/img-lazy
[fix] lazy loading of <img> tags
This commit is contained in:
Markus Heiser
File diff suppressed because one or more lines are too long
@@ -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 () {
|
||||
|
||||
File diff suppressed because one or more lines are too long
+1
-1
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
+1
-1
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -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"}
|
||||
File diff suppressed because one or more lines are too long
@@ -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 {
|
||||
|
||||
@@ -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 -%}
|
||||
|
||||
|
||||
@@ -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">{{- "" -}}
|
||||
|
||||
Reference in New Issue
Block a user