From 2f37e0ed1679ed81f30d0829d0d18735b1b4d2e8 Mon Sep 17 00:00:00 2001 From: rene Date: Wed, 27 May 2026 08:50:09 +0200 Subject: [PATCH] Perf: Freunde-Seite nutzt _preview.webp + lazy loading, SW by-v1109 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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. --- VERSION | 2 +- backend/static/index.html | 24 ++++++++++++------------ backend/static/js/app.js | 2 +- backend/static/js/pages/friends.js | 17 ++++++++++++----- backend/static/js/ui.js | 17 +++++++++++++++++ backend/static/landing.html | 2 +- backend/static/sw.js | 2 +- 7 files changed, 45 insertions(+), 21 deletions(-) diff --git a/VERSION b/VERSION index 8770aa2..304a6a5 100644 --- a/VERSION +++ b/VERSION @@ -1 +1 @@ -1108 \ No newline at end of file +1109 \ No newline at end of file diff --git a/backend/static/index.html b/backend/static/index.html index d0f3df5..92e72d5 100644 --- a/backend/static/index.html +++ b/backend/static/index.html @@ -86,14 +86,14 @@ Ban Yaro - + - - - - - + + + + + @@ -617,11 +617,11 @@ - - - - - + + + + + @@ -631,7 +631,7 @@ - + diff --git a/backend/static/js/app.js b/backend/static/js/app.js index e9850ce..2232ad1 100644 --- a/backend/static/js/app.js +++ b/backend/static/js/app.js @@ -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; diff --git a/backend/static/js/pages/friends.js b/backend/static/js/pages/friends.js index d325299..a7519ca 100644 --- a/backend/static/js/pages/friends.js +++ b/backend/static/js/pages/friends.js @@ -282,10 +282,12 @@ window.Page_friends = (() => { : ''; const avatar = item.dog_foto - ? `${_esc(item.dog_name || '')}` : item.avatar_url - ? `${_esc(item.user_name)}` : `
${_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 => `
- ${_esc(d.name)}
`; } if (firstDog?.foto_url) { - return `${_esc(firstDog.name)}`; } diff --git a/backend/static/js/ui.js b/backend/static/js/ui.js index 0d43666..52710f7 100644 --- a/backend/static/js/ui.js +++ b/backend/static/js/ui.js @@ -285,6 +285,22 @@ const UI = (() => { // ---------------------------------------------------------- // LEERER ZUSTAND (Empty State) // ---------------------------------------------------------- + // ---------------------------------------------------------- + // PREVIEW-URL — für lokale Media: _preview.webp statt Original + // ---------------------------------------------------------- + // Verwendung: + // + 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 `
@@ -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, diff --git a/backend/static/landing.html b/backend/static/landing.html index 46813e9..df14320 100644 --- a/backend/static/landing.html +++ b/backend/static/landing.html @@ -4,7 +4,7 @@ - + Ban Yaro — Die Hunde-App für Deutschland, Österreich & Schweiz diff --git a/backend/static/sw.js b/backend/static/sw.js index ec42934..d8de5e4 100644 --- a/backend/static/sw.js +++ b/backend/static/sw.js @@ -4,7 +4,7 @@ ============================================================ */ // ← EINZIGE Stelle für die Version — STATIC_ASSETS und CACHE_VERSION leiten sich ab -const VER = '1108'; +const VER = '1109'; const CACHE_VERSION = `by-v${VER}`; const CACHE_STATIC = `${CACHE_VERSION}-static`; const CACHE_TILES = 'ban-yaro-tiles-v1'; // bleibt über SW-Updates erhalten