Lazy load images

This commit is contained in:
rubenwardy 2023-08-25 20:49:55 +01:00
parent 210a0a10ae
commit 0649e5cf13
11 changed files with 32 additions and 14 deletions

@ -13,6 +13,17 @@
background-size: cover;
background-repeat: no-repeat;
background-position: center;
img {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
object-fit: cover;
padding: 0;
margin: 0;
}
}
.packagegridscrub {

@ -15,8 +15,8 @@
<meta name="og:description" content="{{ self.description() | normalize_whitespace }}">
{%- endif %}
<link rel="stylesheet" type="text/css" href="/static/libs/bootstrap.min.css?v=2">
<link rel="stylesheet" type="text/css" href="/static/custom.css?v=42">
<link rel="stylesheet" type="text/css" href="/static/libs/bootstrap.min.css?v=3">
<link rel="stylesheet" type="text/css" href="/static/custom.css?v=43">
<link rel="search" type="application/opensearchdescription+xml" href="/static/opensearch.xml" title="ContentDB" />
{% if noindex -%}

@ -79,7 +79,7 @@
<div>
<article class="card">
<div class="ratio ratio-16x9">
<img class="card-img-top" src="{{ item.package.get_thumb_or_placeholder(4) }}" alt="{{ item.package.title }} screenshot">
<img loading="lazy" class="card-img-top" src="{{ item.package.get_thumb_or_placeholder(4) }}" alt="{{ item.package.title }} screenshot">
</div>
<div class="card-body">
{% if item.package.state.name != "APPROVED" %}

@ -44,7 +44,7 @@
<div class="carousel-item {% if loop.index == 1 %}active{% endif %}">
<a href="{{ package.get_url('packages.view') }}">
<div class="ratio ratio-16x9">
<img src="{{ cover_image }}"
<img loading="lazy" src="{{ cover_image }}"
alt="{{ _('%(title)s by %(author)s', title=package.title, author=package.author.display_name) }}">
</div>
<div class="carousel-caption text-shadow">

@ -1,6 +1,6 @@
{% macro render_pkgtile(package, show_author) -%}
<li class="packagetile flex-fill"><a href="{{ package.get_url('packages.view') }}"
style="background-image: url({{ package.get_thumb_or_placeholder(2) }});">
<li class="packagetile flex-fill"><a href="{{ package.get_url('packages.view') }}">
<img src="{{ package.get_thumb_or_placeholder(2) }}" loading="lazy">
<div class="packagegridscrub"></div>
<div class="packagegridinfo">
<h3>

@ -27,7 +27,8 @@
<a id="{{ review_anchor }}"></a>
<div class="col-md-1 p-1">
<a href="{{ url_for('users.profile', username=review.author.username) }}">
<img class="img-fluid user-photo img-thumbnail img-thumbnail-1" src="{{ review.author.get_profile_pic_url() }}">
<img class="img-fluid user-photo img-thumbnail img-thumbnail-1"
src="{{ review.author.get_profile_pic_url() }}" loading="lazy">
</a>
</div>
<div class="col-md-auto ps-1 pe-3 pt-2 text-center" style=" font-size: 200%;">

@ -4,7 +4,8 @@
<li class="row my-2 mx-0">
<div class="col-md-1 p-1">
<a href="{{ url_for('users.profile', username=r.author.username) }}">
<img class="img-fluid user-photo img-thumbnail img-thumbnail-1" src="{{ r.author.get_profile_pic_url() }}">
<img class="img-fluid user-photo img-thumbnail img-thumbnail-1"
src="{{ r.author.get_profile_pic_url() }}" loading="lazy">
</a>
</div>
<div class="col pr-0">
@ -81,7 +82,8 @@
<li class="row my-2 mx-0 align-items-center">
<div class="col-md-1 p-1">
<a href="{{ url_for('users.profile', username=r.author.username) }}">
<img class="img-fluid user-photo img-thumbnail img-thumbnail-1" src="{{ r.author.get_profile_pic_url() }}">
<img class="img-fluid user-photo img-thumbnail img-thumbnail-1"
src="{{ r.author.get_profile_pic_url() }}" loading="lazy">
</a>
</div>
<div class="col-auto">
@ -137,7 +139,7 @@
<div class="row mt-0 mb-4 comments mx-0">
<div class="col-md-1 p-1">
<img class="img-fluid user-photo img-thumbnail img-thumbnail-1"
src="{{ current_user.get_profile_pic_url() }}">
src="{{ current_user.get_profile_pic_url() }}" loading="lazy">
</div>
<div class="col pr-0">
<div class="card">

@ -10,7 +10,8 @@
<span class="row m-0 p-0">
<span class="col-auto m-0 p-0">
<img class="img-fluid user-photo img-thumbnail img-thumbnail-1"
src="{{ package.get_thumb_or_placeholder(1) }}" alt="{{ _('Thumbnail') }}" style="max-height: 20px;">
src="{{ package.get_thumb_or_placeholder(1) }}" loading="lazy"
alt="{{ _('Thumbnail') }}" style="max-height: 20px;">
</span>
<span class="col m-0 p-0 ps-2">
{{ package.title }}

@ -22,7 +22,8 @@
{{ form.hidden_tag() }}
<div class="row mt-0 mb-4 comments mx-0">
<div class="col-md-1 p-1">
<img class="img-fluid user-photo img-thumbnail img-thumbnail-1" src="{{ current_user.get_profile_pic_url() }}">
<img class="img-fluid user-photo img-thumbnail img-thumbnail-1"
src="{{ current_user.get_profile_pic_url() }}" loading="lazy">
</div>
<div class="col">
<div class="card">

@ -18,7 +18,8 @@
<li class="row my-2 mx-0">
<div class="col-md-1 p-1">
<a href="{{ url_for('users.profile', username=r.author.username) }}">
<img class="img-fluid user-photo img-thumbnail img-thumbnail-1" src="{{ r.author.get_profile_pic_url() }}">
<img class="img-fluid user-photo img-thumbnail img-thumbnail-1"
src="{{ r.author.get_profile_pic_url() }}" loading="lazy">
</a>
</div>
<div class="col pr-0">

@ -109,7 +109,8 @@
</span>
{% for viewer in thread.get_visible_to() %}
<a href="{{ url_for('users.profile', username=viewer.username) }}" title="{{ viewer.display_name }}">
<img style="max-height: 2em;" src="{{ viewer.get_profile_pic_url() }}" alt="{{ viewer.display_name }}" />
<img style="max-height: 2em;" src="{{ viewer.get_profile_pic_url() }}" loading="lazy"
alt="{{ viewer.display_name }}">
</a>
{% endfor %}
<a href="{{ url_for('users.list_all') }}" title="{{ _('Plus approvers and editors') }}">