Giters

GTBitsOfGood / website

Our website, built from the ground up with Svelte + Sapper to connect nonprofits, students, and everyone else in between with Bits of Good 🚀

Home Page:https://bitsofgood.org

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Lazy load images

opened this issue · comments

commented

Rather than loading the full res images immediately, it would be nice to:

  • Load a blurred-out version of the photo initially
  • Swap to the full res image once it loads completely
  • Lazy-load the full res image (aka only load when scrolled to) to save on site loading times

An example was written by the Svelte framework creator here:
https://svelte.dev/repl/26ba12b3fbd146eaaefc8b024a826da7?version=3.5.1

Action items

  • Lazy load the images on the project cards as a proof of concept
  • Try lazy-loading on the main logo image. This is an SVG <image> tag rather than an <img>, so wait on a separate PR to change this!
  • Break the functionality out into a separate Image component in the /components directory
commented

Here's another nice alternative to using a blurred out image for lazy loading: https://github.com/fogleman/primitive

commented

Idea: what if we fade from the blurred image into the actual image for a smoother transition? We could probably do that with a separate <LazyImg> component, with two images overlaid one on top of the other. onLoad, the first image (blurred) fades out (opacity animation) to reveal the second image underneath (full res image)