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 →

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.