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

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">`;
}