지연 로딩

<div class="atlas"><div class="head"><b>LAZY LOADING · scroll</b><span class="pulse"></span></div><div class="stage"><div class="lazy-view box"><div class="lazy-card ready">visible image</div><div class="lazy-card" id="lazy-card">offscreen image</div><div class="lazy-line">viewport edge</div></div><div class="lazy-net mono" id="lazy-net">network: first image</div></div></div>

.atlas{width:min(94vw,720px);height:min(88vh,320px);border:1px solid var(--line);border-radius:14px;background:var(--surface);padding:clamp(10px,2.5vmin,18px);display:flex;flex-direction:column;gap:clamp(7px,2vmin,12px);font:500 clamp(12px,3.2vmin,16px)/1.25 var(--font-sans),sans-serif;color:var(--fg);box-shadow:0 8px 28px rgba(0,0,0,.06)}.head{display:flex;align-items:center;justify-content:space-between;color:var(--accent);letter-spacing:.03em}.pulse{width:8px;height:8px;border-radius:50%;background:var(--accent);animation:blink 1.3s infinite}@keyframes blink{50%{opacity:.2}}.stage{flex:1;min-height:0;position:relative;overflow:hidden}.mono{font-family:ui-monospace,SFMono-Regular,Consolas,monospace}.muted{color:var(--muted)}.accent{color:var(--accent)}.box{border:1px solid var(--line);border-radius:8px;background:var(--bg)}.lazy-view{height:78%;position:relative;padding:8px;overflow:hidden}.lazy-card{height:32%;border-radius:5px;border:1px solid var(--line);display:grid;place-items:center;margin-bottom:7px;background:var(--bg);transition:transform .6s,background .5s;color:var(--muted)}.lazy-card.ready{background:color-mix(in srgb,var(--accent) 22%,var(--bg));color:var(--fg)}.lazy-card.scrolled{transform:translateY(-8px);background:color-mix(in srgb,var(--accent) 22%,var(--bg));color:var(--fg)}.lazy-line{position:absolute;bottom:50%;left:0;right:0;border-top:2px dashed var(--accent);text-align:right;color:var(--accent);font-size:12px}.lazy-net{text-align:right;color:var(--accent);padding-top:5px;font-size:12px}

let scroll=false;function tick(){scroll=!scroll;document.getElementById('lazy-card').classList.toggle('scrolled',scroll);document.getElementById('lazy-net').textContent=scroll?'network: second image requested':'network: first image'}tick();setInterval(tick,2200)