CSS 如何实现图片懒加载占位？

Question

CSS 如何实现图片懒加载占位？

仓乃文 · Accepted Answer

图片懒加载占位通过 aspect-ratio 保持宽高比防止布局抖动，配合渐变背景或模糊缩略图作为加载前的占位效果。

```css
.lazy-image-wrapper {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #f0f0f0;
  overflow: hidden;
}

.lazy-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.lazy-image-wrapper img.loaded {
  opacity: 1;
}
```

LQIP（低质量图片占位）：
```css
.lqip-wrapper {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #f0f0f0;
}

.lqip-wrapper::before {
  content: ";
  position: absolute;
  inset: 0;
  background: url(placeholder-low-res.jpg) center/cover;
  filter: blur(20px);
  transform: scale(1.1);
  transition: opacity 0.5s;
}

.lqip-wrapper.loaded::before {
  opacity: 0;
}
```

补充说明：
- aspect-ratio 保持占位区域宽高比，防止图片加载后布局抖动
- LQIP 用极低分辨率图片 + blur 模糊作为占位
- loaded 类通过 JS IntersectionObserver 或 img onload 添加
- 适合图片列表、相册、文章配图等场景