Lazy-loading thumbnails

[pR0Ps]

If there are a lot of pictures in an album, they are all loaded immediately which can be slow, resource-intensive, and bandwidth-heavy for extremely large albums. Also, if the user clicks the first thumbnail in an album, downloading the bigger image has to compete for resources with any thumbnails that are still loading.

As part of this feature, the code should be refactored a bit to separate the layout and loading of the image. Something like <img src="[placeholder]" data-src="[actual image]" />, then using some separate JS to load the images and swap them in as needed.

Using something like an IntersectionObserver would be a performant way to only load images as they come on-screen. Could also use a library like vanilla-lazyload to do this (or crib code from it since it's MIT). Another option: https://github.com/aFarkas/lazysizes

[immanuelfodor]

I think this is a priority No.1. feature needed for effective viewing on mobile (and desktop) :)