rene/banyaro
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Perf: Freunde-Seite nutzt _preview.webp + lazy loading, SW by-v1109

Browse source 
Symptom: Friends-Seite lädt Avatare langsam — Original-Bilder
(z.B. 4-12MB iPhone-Fotos) statt der vorhandenen _preview.webp
Vorschauen.

Neue zentrale Helper in ui.js:
- UI.previewUrl(url): ersetzt /media/...jpg → /media/..._preview.webp
- UI.previewFallback(originalUrl): onerror-Handler der Original
  nachlädt falls _preview nicht existiert (für ältere Uploads)

friends.js 3 Stellen migriert:
- _userAvatar (Freundes-Karte + Aktivitäts-Feed)
- Activity-Avatar (dog_foto + avatar_url)
- Dog-Mini-Thumbs im Profil-Modal

Zusätzlich auf allen drei Stellen:
- loading="lazy" für off-screen Bilder
- decoding="async" damit der Hauptthread nicht blockiert

Reuse-Potential: wiki.js, dog-profile.js und andere können später
auf die zentralen Helper umgestellt werden.
This commit is contained in:
rene 2026-05-27 08:50:09 +02:00
parent f6633d65b0
commit 2f37e0ed16
7 changed files with 45 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

2
backend/static/js/app.js
View file

@ -3,7 +3,7 @@
Router, State-Management, Navigation, Initialisierung.
============================================================ */
const APP_VER = '1108'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
const APP_VER = '1109'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
const APP_VERSION = '1.6.0'; // ← semantische Version, wird bei make release gesetzt
window.APP_VER = APP_VER; // global verfügbar für andere Module (z.B. offline-indicator)
window.APP_VERSION = APP_VERSION;

17
backend/static/js/pages/friends.js
View file

@ -282,10 +282,12 @@ window.Page_friends = (() => {
: '';
const avatar = item.dog_foto
? `<img src="${_esc(item.dog_foto)}" alt="${_esc(item.dog_name || '')}"
? `<img src="${_esc(UI.previewUrl(item.dog_foto))}" alt="${_esc(item.dog_name || '')}"
loading="lazy" decoding="async" onerror="${UI.previewFallback(item.dog_foto)}"
class="fr-activity-avatar">`
: item.avatar_url
? `<img src="${_esc(item.avatar_url)}" alt="${_esc(item.user_name)}"
? `<img src="${_esc(UI.previewUrl(item.avatar_url))}" alt="${_esc(item.user_name)}"
loading="lazy" decoding="async" onerror="${UI.previewFallback(item.avatar_url)}"
class="fr-activity-avatar">`
: `<div class="fr-activity-avatar fr-activity-avatar--initial">
${_esc((item.user_name || '?')[0].toUpperCase())}
@ -537,7 +539,8 @@ window.Page_friends = (() => {
padding-top:var(--space-3);border-top:1px solid var(--c-border)">
${withPhotos.slice(0, 4).map(d => `
<div class="text-center">
<img src="${_esc(d.foto_url)}" alt="${_esc(d.name)}"
<img src="${_esc(UI.previewUrl(d.foto_url))}" alt="${_esc(d.name)}"
loading="lazy" decoding="async" onerror="${UI.previewFallback(d.foto_url)}"
style="width:44px;height:44px;border-radius:50%;object-fit:cover;
border:2px solid var(--c-surface)">
<div style="font-size:10px;color:var(--c-text-muted);margin-top:2px;
@ -782,12 +785,16 @@ window.Page_friends = (() => {
// ----------------------------------------------------------
function _userAvatar(name, firstDog, avatarUrl) {
if (avatarUrl) {
return `<img src="${_esc(avatarUrl)}" alt="${_esc(name)}"
return `<img src="${_esc(UI.previewUrl(avatarUrl))}" alt="${_esc(name)}"
loading="lazy" decoding="async"
onerror="${UI.previewFallback(avatarUrl)}"
style="width:44px;height:44px;border-radius:50%;object-fit:cover;
border:2px solid var(--c-primary);flex-shrink:0">`;
}
if (firstDog?.foto_url) {
return `<img src="${_esc(firstDog.foto_url)}" alt="${_esc(firstDog.name)}"
return `<img src="${_esc(UI.previewUrl(firstDog.foto_url))}" alt="${_esc(firstDog.name)}"
loading="lazy" decoding="async"
onerror="${UI.previewFallback(firstDog.foto_url)}"
style="width:44px;height:44px;border-radius:50%;object-fit:cover;
border:2px solid var(--c-primary);flex-shrink:0">`;
}

17
backend/static/js/ui.js
View file

@ -285,6 +285,22 @@ const UI = (() => {
// ----------------------------------------------------------
// LEERER ZUSTAND (Empty State)
// ----------------------------------------------------------
// ----------------------------------------------------------
// PREVIEW-URL — für lokale Media: _preview.webp statt Original
// ----------------------------------------------------------
// Verwendung:
// <img src="${UI.previewUrl(profile.foto_url)}"
// onerror="${UI.previewFallback(profile.foto_url)}">
function previewUrl(url) {
if (!url || !url.startsWith('/media/')) return url || '';
return url.replace(/\.(jpe?g|png|gif|webp)$/i, '_preview.webp');
}
// onerror-Handler: bei 404 vom _preview die Original-URL nachladen
function previewFallback(originalUrl) {
if (!originalUrl || !originalUrl.startsWith('/media/')) return '';
return `if(this.src.includes('_preview')){this.src='${escape(originalUrl)}'}else{this.style.opacity='0.3'}`;
}
function emptyState({ icon, title, text, action } = {}) {
return `
<div class="empty-state">
@ -1252,6 +1268,7 @@ const UI = (() => {
setLoading, asyncButton,
formData, setFormError, clearFormErrors,
emptyState, errorState, time,
previewUrl, previewFallback,
setupPhotoPreview, scrollTop, skeleton, skeletonList,
moneyInput, parseMoney, datePicker,
icon: _svgIcon,