A trigger that fires too late leaves a visible hole
Aliases: lazy-load blank · trigger too late · viewport hole
What it is
Lazy loading hangs on a trigger line: fetch when the object nears demand. Draw that line at the viewport edge, or after entry, and fetch, decode and layout still take time while the person is already looking at the slot. The slot is empty. That is a visible hole — not missing content, content whose appearance was dragged past gaze by the threshold. The first screen got faster; scrolling pays it back with a cavity.
Why it happens
Scrolling can deliver an unloaded object into the viewport faster than the network can bring the object back. If the trigger is “intersects viewport”, the fetch starts on the beat the object is already under the eyes. The round trip, decode and insert then perform a wait on an already-exposed hole. Fast flicks, stitched pages and jump-to-anchor dump many objects across the line at once, and the threshold looks even later: the system has just started the first image when the person has already stopped on the third hole.
A warmup distance (root margin) is the race against that: start the fetch while the object is still some pixels away, so round-trip and scroll land on “something is there on arrival”. Too short or zero, the race is lost. Too long, lazy loading decays into fetching early and first-screen cost returns. The threshold follows round-trip time, not taste.
Where it stops holding
Objects already in local cache may fill even a late trigger fast enough not to notice — the same threshold on a cold cache or a weak network suddenly becomes very late, so do not calibrate on office Wi-Fi. Jumping to a mid-page anchor, restoring scroll, or scrolling to a find-in-page hit instantly violates the “approach slowly” assumption; those paths need a fetch around the target before the motion, not an intersection trigger. If placeholder height is zero the hole also shoves, a cousin of late chunks shoving presented content; even with height reserved, “an image should be here and is not” still holds. For users who have images off, or who use a screen reader, the visual hole does not apply — that is not a reason to fire even later.
Applying it
- Put the trigger outside the viewport. Size a warmup margin from typical round-trip plus decode, rather than
intersecting && fetch. - For jumps, restored positions and deep links, fetch around the target before the scroll motion; do not use the ordinary approach trigger.
- On a weak network, widen warmup or degrade to earlier loading; do not keep a line written for a fast network.
- How to check: on a throttled network, flick fast through an image wall and stop. If the stop shows a hole that then pops into an image, the threshold is late — grow the margin until the image is already there when you stop, not just starting to spin.