Chapter 6

Observing the DOM


Recipe 6.1
Lazy Loading an Image

Defer loading of an image until it is scrolled into view.

Recipe 6.2
Wrapping an IntersectionObserver with a Promise

Create a Promise that is resolved once a given element becomes visible.

Recipe 6.3
Automatically Pause and Play a Video

Pause a playing video if it scrolls out of view.

Recipe 6.4
Animating Changes in Height

Animate changes in height when an element's content is toggled.

Recipe 6.5
Change an Element’s Content Based on Size

Change the contents of an element, depending on its size.

Recipe 6.6
Applying a Transition When an Element Scrolls Into View

Make content appear with an animation effect as it is scrolled into view.

Recipe 6.7
Using Infinite Scroll

Automatically load more content when scrolling to the bottom of a container.

Web Browser API Cookbook
Joe Attardi