Virtual — ten thousand tiles, DOM-recycled
Windowing a grid of non-uniform-height tiles is the chicken-and-egg: you need heights to position items, but heights come from loading them. The left panel is the naive attempt — drop N <img> tags into a CSS column layout and let the browser fetch, decode, and reflow all at once. The right panel runs @somnai-dreams/preimage/loading over a DOM-recycled pool, so you can compare runtime dimension probing, optional manifest dimensions, and queued, visible-first, after-layout, or immediate image scheduling while scrolling.
Tiles
500
Measured loading
Heads up: the naive side at 5k+ tiles can make your tab unresponsive for a few seconds while the browser builds the CSS column layout and opens 10k parallel fetches. That's the point.
Naive <img> · CSS column
DOM nodes—
First tile loaded—
All tiles loaded—
Bytes transferred—
Preimage dimsOnly + DOM recycling
DOM nodes (live)—
Dims ready—
First tile placed—
All tiles placed—
Bytes transferred—