长列表图片懒加载，用 loading=lazy 或 IntersectionObserver

优先用原生方案：img 加 loading=lazy 由浏览器判断距离，补 decoding=async 避免阻塞渲染。

要占位或预加载时用 IntersectionObserver，进视口把 data-src 写回 src 并取消监听。

必须预留宽高或 aspect-ratio，否则布局会跳；首屏图别懒加载。

<img src="thumb.jpg" loading="lazy" decoding="async" width="640" height="360" alt="">

const io = new IntersectionObserver((entries) => {
  entries.forEach((e) => {
    if (!e.isIntersecting) return
    e.target.src = e.target.dataset.src
    io.unobserve(e.target)
  })
}, { rootMargin: '200px' })
document.querySelectorAll('img[data-src]').forEach((el) => io.observe(el))