From 77288999485d14070f119813a26a9bd21728356b Mon Sep 17 00:00:00 2001 From: Zed Date: Wed, 5 Feb 2025 03:18:49 +0100 Subject: [PATCH] Add lazy loading for images --- src/views/renderutils.nim | 2 +- src/views/tweet.nim | 10 ++++------ 2 files changed, 5 insertions(+), 7 deletions(-) diff --git a/src/views/renderutils.nim b/src/views/renderutils.nim index f298fad..41ef8df 100644 --- a/src/views/renderutils.nim +++ b/src/views/renderutils.nim @@ -91,7 +91,7 @@ proc genDate*(pref, state: string): VNode = proc genImg*(url: string; class=""): VNode = buildHtml(): - img(src=getPicUrl(url), class=class, alt="") + img(src=getPicUrl(url), class=class, alt="", loading="lazy") proc getTabClass*(query: Query; tab: QueryKind): string = if query.kind == tab: "tab-item active" diff --git a/src/views/tweet.nim b/src/views/tweet.nim index 2fe4ac9..34dcd4c 100644 --- a/src/views/tweet.nim +++ b/src/views/tweet.nim @@ -10,9 +10,7 @@ import general const doctype = "\n" proc renderMiniAvatar(user: User; prefs: Prefs): VNode = - let url = getPicUrl(user.getUserPic("_mini")) - buildHtml(): - img(class=(prefs.getAvatarClass & " mini"), src=url) + genImg(user.getUserPic("_mini"), class=(prefs.getAvatarClass & " mini")) proc renderHeader(tweet: Tweet; retweet: string; pinned: bool; prefs: Prefs): VNode = buildHtml(tdiv): @@ -92,10 +90,10 @@ proc renderVideo*(video: Video; prefs: Prefs; path: string): VNode = tdiv(class="attachment video-container"): let thumb = getSmallPic(video.thumb) if not video.available: - img(src=thumb) + img(src=thumb, loading="lazy") renderVideoUnavailable(video) elif not prefs.isPlaybackEnabled(playbackType): - img(src=thumb) + img(src=thumb, loading="lazy") renderVideoDisabled(playbackType, path) else: let @@ -144,7 +142,7 @@ proc renderPoll(poll: Poll): VNode = proc renderCardImage(card: Card): VNode = buildHtml(tdiv(class="card-image-container")): tdiv(class="card-image"): - img(src=getPicUrl(card.image), alt="") + genImg(card.image) if card.kind == player: tdiv(class="card-overlay"): tdiv(class="overlay-circle"):