Astro
client:visible
client:visible is the Astro directive that waits until an island enters the viewport before loading its JavaScript. It uses IntersectionObserver.
How it is measured
The server renders the island's HTML. The browser watches the element and requests the script when it scrolls into view. You can pass rootMargin to start loading a little before it appears, for example 200px.
Measure by scrolling slowly and watching the network panel. The chunk should appear near the moment the element enters. If it loads at page start, the island is already visible on load.
Worked example
A long product page has a review carousel at the bottom, 22 KB with its library. With client:visible it loads only for the 31 percent of visitors who scroll that far. The rest never download it.
The team sets rootMargin to 300px so the carousel is ready as it comes into view. Without the margin, fast scrollers saw a placeholder for half a second.
How it differs
client:visible waits for the element to be on screen. client:idle waits for the main thread to be free. Visible excludes below-the-fold cost for people who never scroll; idle excludes nothing about position.
Common errors
Using it on an island already above the fold. Forgetting the margin and showing a dead area. Giving the placeholder no height. Using it for a control needed by keyboard users who tab past it. Expecting it to work in a hidden tab.
In practice
Make it the default for anything below the first screen. Give the placeholder a fixed height. Scroll the page on a throttled connection to check the handoff.