OwlBurst/Ponysearch
1
0
Fork 0
forked from Ponysearch/Ponysearch
Code Pull requests Activity

[fix] lazy loading of <img> tags

Browse source 
Images should include dimension attributes.  Without `width` and `height`
specified, image dimensions are 0×0 pixels at first.  ...  In this case the
browser determines that all of them are visible to the user and decides to load
everything [1].

In CSS the `width` is set to a value and the `height` is unsed to scale the image
proportional in both dimensions.

[1] https://web.dev/browser-level-image-lazy-loading/#images-should-include-dimension-attributes
[2] https://caniuse.com/loading-lazy-attr

Signed-off-by: Markus Heiser <markus.heiser@darmarit.de>
This commit is contained in:
Markus Heiser 2021-12-01 18:05:25 +01:00
parent da1f970eb5
commit c416464949
3 changed files with 5 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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