Jonathan Neal dissects the Islands Architecture approach behind Astro.
During the presentation, Fred demonstrates dynamically loading JS using “Islands Architecture”,a strategy where small HTML placeholders are progressively upgraded with dynamic or interactive content as-needed.
The demonstration involves waiting on the viewport visibility of a div placeholder before loading some JS.
Using an IIFE an
IntersectionObserver is attached to keep an eye on a preceding a DOM Node. Once in view it’ll disconnect the
IntersectionObserver and run whatever JS you want it to run (such as loading and rendering a React App).
Lazy loading JS by visibility →
🤔 Astro? Chris has the details over at CSS-Tricks. Be sure to watch the video.