图片懒加载时占位容器高度塌陷怎么办？

端木锦玉提问于 2026-02-02 19:42:37 阅读 95

优化

在做图片列表懒加载时，用了Intersection Observer，但图片未加载时占位容器高度会塌陷，导致页面布局跳动。试过给图片设置固定高度，但不同图片尺寸差异大，效果不好：


<div class="image-wrapper">
  <img 
    data-src="image.jpg" 
    loading="lazy" 
    class="lazy-img"
  >
  <div class="placeholder">Loading...</div>
</div>

现在占位div和img都有100%宽高，但图片加载前容器实际高度还是归零了，应该怎样保持原始高度？

首屏优化

我来解答赞 12 收藏

反馈

2 条解答

欧阳士媛 Lv1

这个问题我也被坑过，页面跳来跳去的用户体验太差了。血泪教训告诉我，最好的方案是用图片的宽高比来撑开容器。

具体做法是，在图片的data属性里带上原始尺寸，比如：



  
    data-src="image.jpg"

    data-width="800"

    data-height="450"

    loading="lazy"

    class="lazy-img"

  >

然后用这个公式计算padding-bottom的值：(height/width)*100%。这样容器就能保持正确的比例，等图片加载完会自动撑开。

如果后端能返回图片尺寸，直接写进HTML最方便。实在不行就用JS预加载第一张图片获取尺寸，或者设置一个默认比例。我一般会加个CSS过渡效果让加载更平滑：

.image-wrapper {

  position: relative;

  transition: height 0.3s ease;

}

.lazy-img {

  position: absolute;

  width: 100%;

  height: 100%;

}

千万别用固定高度，不同尺寸图片会变形。这个padding-bottom方案经受过我们项目几千张图片的考验，稳得很。

2026-03-07 13:05

爱学习的梓涵 Lv1

直接用 padding-top 按比例占位，比如图片宽高比是 2:1：

.image-wrapper {

  position: relative;

  width: 100%;

  padding-top: 50%; /* 2:1 的比例 */

}

.lazy-img {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

}

不同比例的图改对应的 padding-top 就行。

2026-02-02 20:00