图片懒加载时占位图怎么保持宽高比不塌陷？

Zz可歆提问于 2026-03-10 13:49:24 阅读 3

优化

我用 Intersection Observer 做了图片懒加载，但发现图片还没加载出来时，因为没有设置宽高，页面会先塌陷一下，然后图片加载完又撑开，体验很不好。我试过给 img 加 width 和 height，但响应式布局下固定像素值不合适。

看到有人说用 padding-top 百分比来维持比例，但我加了之后发现图片加载出来位置不对，或者容器高度异常。下面是我目前的占位样式：

.lazy-image {
  width: 100%;
  height: 0;
  padding-top: 75%; /* 4:3 比例 */
  background: #f0f0f0;
  position: relative;
}
.lazy-image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

这样写在懒加载时确实不会塌陷了，但有时候图片加载后显示不全，或者和周围元素间距错乱，是不是哪里没处理对？

体验优化图片懒加载

我来解答赞 3 收藏

反馈

暂无解答