In a lazy-loading image gallery built on IntersectionObserver, you want images to start loading roughly 300px before they scroll into view. Which constructor option does that, and what are the rules for its value and for the root it is measured against?

## The three options, and which one does the preloading The `IntersectionObserver` constructor's second argument holds `root`, `rootMargin` and `threshold`. `threshold` decides *how much* overlap counts. `root` decides *what* the target is compared against. `rootMargin` adjusts the root's rectangle before the comparison — and that is the one that buys you early warning. ```js const io = new IntersectionObserver(load, { root: null, // the viewport rootMargin: '300px 0px', threshold: 0, }); ``` With that margin, the top and bottom edges of the comparison rectangle are pushed outward by 300px each. An image 250px below the fold is already "intersecting", so its request starts while the user is still scrolling toward it and the pixels are usually there by the time it appears. ## Rules for the value - **CSS margin shorthand.** One value applies to all sides; two are vertical then horizontal; four are top, right, bottom, left. - **Units are mandatory for non-zero values.** Only `px` and `%` are accepted. `rootMargin: '300'` is a parse failure and the constructor throws, rather than quietly behaving like `300px`. This trips people who copy a number out of a config. - **Negative values shrink the box.** `'-25% 0px'` means "do not count this as intersecting until it is a quarter of the way into the viewport" — useful for scroll-spy navigation, where you want the section that is genuinely in the reading zone, not the one whose first pixel just appeared. - **Percentages resolve against the root.** Left/right percentages use the root's width, top/bottom use its height. Note that they are *not* relative to the target. `rootMargin` is read-only on the instance: you cannot retune an existing observer, you construct a new one. ## What rootMargin does not do It changes only the arithmetic. It does not move the element, does not affect layout, does not change what the user can scroll to, and does not create a scrollable area. Nothing about the page is different; only the observer's answer is. ## Choosing the root Leaving `root` unset (or `null`) uses the viewport — the *implicit root*. Set it to an element when the content scrolls inside a container rather than with the page: ```js const io = new IntersectionObserver(load, { root: document.querySelector('#gallery-scroller'), rootMargin: '300px 0px', }); ``` Two rules matter here. First, **the root must be an ancestor of every target you observe.** If it is not, there is no meaningful containing box, and targets are simply reported as not intersecting — a silent failure that looks like "the observer is broken". Second, clipping still applies along the chain: an intermediate `overflow: hidden` ancestor clips the intersection rectangle even if it is not your chosen root, so an element can be geometrically inside the root and still not intersect because something in between hides it. Getting these two backwards produces the two classic bug reports: "it fires for everything at once" (root left as the viewport while the list scrolls inside a container, so every item is technically in the viewport's box) and "it never fires" (root set to a sibling or a descendant). ## Sizing the margin The margin is a bet about scroll velocity. Too small and the user still sees empty frames; too large and you have fetched a screenful of images nobody scrolled to, spending bandwidth and contending with requests that matter now. A few hundred pixels — roughly a third to a half of a viewport — is a common starting point, and different for a fast-flick mobile list than for a desktop grid. Ask what the failure looks like on the target hardware rather than reaching for a number, and remember that the margin also affects how many concurrent requests can be in flight at once. ## A complete lazy loader ```js const io = new IntersectionObserver((entries, obs) => { for (const entry of entries) { if (!entry.isIntersecting) continue; const img = entry.target; img.src = img.dataset.src; obs.unobserve(img); // one shot per image } }, { rootMargin: '300px 0px', threshold: 0 }); document.querySelectorAll('img[data-src]').forEach((img) => io.observe(img)); ``` The `unobserve` is not decorative: once an image has been asked to load, keeping it registered means the browser keeps evaluating an element whose answer can no longer change anything.