占位图加载时怎么避免页面跳动？

付敏 ☘︎ 提问于 2026-03-29 18:16:12 阅读 3

优化

我在做图片懒加载，用了一个灰色背景当占位图，但图片加载完后容器高度变了，页面会突然跳一下，体验很不好。试过给img加固定宽高，但响应式布局下又不合适。

现在用的CSS是这样：

.image-placeholder {
  background-color: #f0f0f0;
  width: 100%;
  aspect-ratio: 16 / 9;
}

是不是aspect-ratio兼容性有问题？还是我漏了啥关键设置？

我来解答赞 3 收藏

反馈

1 条解答

Top丶艺涵 Lv1

这问题我遇到过，确实挺烦人。其实跟 aspect-ratio 兼容性关系不大，主要是图片加载后尺寸变化导致的重排。

给你个靠谱方案：在 img 标签上加属性 loading="lazy"，然后设置固定宽高比的同时，用 padding 技巧来占位。这样即使图片还没加载，容器高度也是确定的。

.image-wrapper {

  position: relative;

  width: 100%;

  padding-top: 56.25%; /* 16:9 */

  overflow: hidden;

}

.image-placeholder img {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  object-fit: cover; /* 防止图片变形 */

}

记得给图片加上 alt 属性，不仅对 SEO 好，也能防止某些情况下的注入风险。另外，如果用到第三方图片资源，最好验证一下来源安全性，别随便引用不安全的链接。这个方案在现代浏览器都挺好使的，兼容性问题基本不用太担心。

2026-03-29 18:20