Sfoglia il codice sorgente

Add lazy loading for images

Zed 1 anno fa
parent
commit
7728899948
2 ha cambiato i file con 5 aggiunte e 7 eliminazioni
  1. 1 1
      src/views/renderutils.nim
  2. 4 6
      src/views/tweet.nim

+ 1 - 1
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"

+ 4 - 6
src/views/tweet.nim

@@ -10,9 +10,7 @@ import general
 const doctype = "<!DOCTYPE html>\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"):