Lazyload images - Githubissues

uok commented 9 months ago

Thanks for creating Nitter, it is a joy to use :heart: - and so much faster than Twitter :rocket:

Most pages have lots of images (profile, avatars next to each tweet, shared images in tweet, etc.) so my suggestion is to use the loading attribute to only load images when they are visible (lazy loading) https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#loading

It is supported by modern browsers (if unsupported they just ignore it), easy to implement and no javascript is needed. https://caniuse.com/loading-lazy-attr

This small change will significantly reduce bandwith. :+1: Thanks and have a nice day!

pin-grid-array commented 9 months ago

Or have something that lets people selectively choose what type of media they want to see. Like https://github.com/zedeus/nitter/issues/1055. Sometimes I do not want to see profile images, uploaded images, images from outside Twitter, animated GIFs, videos, etc.

Petemir commented 9 months ago

Hopefully this could also help with #1109 .

Petemir commented 9 months ago

These are the changes needed to enable lazy loading in images:

src/views/renderutils.nim


@@ proc genDate*(pref, state: string): VNode =

img(src=getPicUrl(url), class=class, alt="")
img(src=getPicUrl(url), class=class, loading="lazy", alt="")
src/views/tweet.nim
```
@@ const doctype = "<!DOCTYPE html>\n"
```
img(class=(prefs.getAvatarClass & " mini"), src=url)
img(class=(prefs.getAvatarClass & " mini"), src=url, loading="lazy")

@@ renderVideo*(video: Video; prefs: Prefs; path: string): VNode = 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")

@@ 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="")
img(src=getPicUrl(card.image), alt="", loading="lazy")

Then re-build docker image

zedeus / nitter

Lazyload images #1157