Supercharged Live Live Live!
summary
Builds a sc-img custom element that uses Shadow DOM and template cloning to style and scope images, hooks native IntersectionObserver to only start loading when an element intersects the viewport, and replaces immediate downloads (page started at ~1.4 MB) with on-demand fetches (first image ~265 KB). Adds a Node/Express postprocessor that reads image dimensions with GraphicsMagick to emit CSS aspect-ratio placeholders and inline base64 low‑res thumbnails, then fades the high‑res image in for a smooth transition.
AI-written summary · about
chapters (11)
- 0:00Introduction and setup
- 0:50Project goal: lazy loading
- 2:39Building the custom element
- 5:05Shadow DOM and styling
- 8:06Intersection Observer API
- 12:31Refining component logic
- 17:55Server-side image handling
- 21:15Extracting image metadata
- 27:14CSS aspect ratio hack
- 31:31Thumbnail and base64 blur
- 37:25Animations and conclusion
