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

端木锦玉 阅读 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 条解答
爱学习的梓涵
直接用 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 就行。
点赞 6
2026-02-02 20:00