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

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

优化

在做图片列表懒加载时，用了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%宽高，但图片加载前容器实际高度还是归零了，应该怎样保持原始高度？

首屏优化

我来解答赞 6 收藏

反馈

1 条解答

爱学习的梓涵 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