Lazy loading JavaScript using IntersectionObserver

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 →