懒加载图片时 CSS 占位导致布局偏移怎么办？

FSD-毓珂提问于 2026-03-24 22:45:17 阅读 4

优化

我在做图片懒加载的时候，为了防止加载时页面跳动，给 img 加了固定宽高，但实际显示还是会有轻微偏移，特别在移动端很明显。是不是我的占位样式写得不对？

目前是这样写的：

.lazy-img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  background-color: #f0f0f0;
}

但图片加载后还是会“闪一下”或者撑开容器，有没有更稳的方案？

渲染优化

我来解答赞 2 收藏

反馈

1 条解答

书生シ桠豪 Lv1

懒人方案：把 .lazy-img 的 width: 100% 改成具体的像素宽度，比如 width: 300px，这样可以确保占位符和图片尺寸一致，避免布局跳动。

2026-03-24 23:15