图片懒加载时占位图怎么处理才不抖动？

UX爱静提问于 2026-03-03 09:10:19 阅读 26

优化

我在做图片懒加载，想用占位图避免布局抖动，但实际效果还是会有跳动，是不是我宽高没设对？

试过给 img 加固定宽高，也试过用背景色占位，但图片加载完还是会“闪一下”或者把下面内容顶下去。是我哪里没考虑到吗？

const img = new Image();
img.src = actualSrc;
img.onload = () => {
  placeholderImg.src = actualSrc; // 替换占位图
};

我来解答赞 15 收藏

反馈

2 条解答

宇文鑫平 Lv1

你这个问题很典型，核心在于占位图的宽高比没对上。

从你代码来看，用 new Image() 预加载没问题，但替换 src 的瞬间，如果占位图和实际图片的宽高比不一致，布局肯定会抖。固定宽高不行，背景色也不行，原因是一样的——你不知道图片实际是横屏还是竖屏。

正确做法是：用 padding-top 或 padding-bottom 的百分比来撑起容器高度。百分比是相对于宽度计算的，这样就能保持宽高比。

具体实现：

容器CSS：

.image-container {

  position: relative;

  width: 300px;  /* 你需要的宽度 */

  padding-top: 75%;  /* 4:3 比例，如果是16:9就是56.25% */

  background: #f0f0f0;

  overflow: hidden;

}



.image-container img {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;

}

或者用现代CSS的 aspect-ratio 属性，更简洁：

.image-container {

  width: 300px;

  aspect-ratio: 16 / 9;

  background: #f0f0f0;

}

关键点说三遍：宽高比要一致，宽高比要一致，宽高比要一致。

你之前固定宽高不行，是因为实际图片尺寸是动态的，你设的固定值和图片真实比例对不上。占位图容器只要保证了正确的宽高比，图片加载前后容器高度不变，下面内容自然不会被顶下去。

如果你的图片尺寸多样，可以在后端返回图片宽高信息，前端根据这个比例动态计算 padding-top 值，或者生成多套占位图容器。

2026-03-19 15:16

W″剑博 Lv1

哎，这布局抖动最烦了，多半是宽高比没预留对。别光设宽高，直接用 CSS 的 aspect-ratio 把空间死死占住，图片加载前位置就是固定的，后面怎么换源都不会抖。

.img-box {

  width: 100%;

  aspect-ratio: 16 / 9; /* 写死图片的宽高比，比如 4:3 或 16:9 */

  background: #f0f0f0;

}

.img-box img {

  width: 100%;

  height: 100%;

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

}

2026-03-03 20:00