图片懒加载时占位图怎么避免布局偏移？
我用 IntersectionObserver 做了图片懒加载，但一开始没设宽高，图片加载完后页面会突然跳动。试过给 img 加 width 和 height 属性，但不同尺寸的图不好统一处理。
也试过用一个 div 当占位容器，里面放个灰色背景的占位图，但实际图片比例不一致时还是会撑开布局。有没有更靠谱的做法？比如能不能在 HTML 里直接预留准确空间？
<div class="image-placeholder">
<img data-src="real-image.jpg" alt="" loading="lazy" />
</div>
- 1
回答
19浏览
懒加载图片时 CSS 占位导致布局偏移怎么办？
我在做图片懒加载的时候，为了防止加载时页面跳动，给 img 加了固定宽高，但实际显示还是会有轻微偏移，特别在移动端很明显。是不是我的占位样式写得不对？ 目前是这样写的： .lazy-img { wid...
- 1
回答
31浏览
占位图加载时如何避免布局偏移？
我在做图片懒加载，用了灰色占位图，但真实图片加载后页面还是会跳一下，怎么解决啊？ 已经给 img 加了固定宽高，也试过用 aspect-ratio，但有些图片比例不一致，还是会有抖动。 这是我的写法：...
- 2
回答
17浏览
图片懒加载时占位图怎么处理才不抖动？
我在做图片懒加载，想用占位图避免布局抖动，但实际效果还是会有跳动，是不是我宽高没设对？ 试过给 img 加固定宽高，也试过用背景色占位，但图片加载完还是会“闪一下”或者把下面内容顶下去。是我哪里没考虑...
- 1
回答
27浏览
为什么我的Vue页面CLS总是超标？图片加载导致布局偏移怎么解决？
我在用Vue做商品列表页，发现Lighthouse测出来的CLS经常超过0.25，主要问题好像是图片加载时没占位，导致下面的内容突然被撑开。我明明给img加了固定宽高，但还是不行。 试过用v-lazy...
- 2
回答
26浏览
图片懒加载时占位图怎么处理才不抖动？
我在做图片懒加载，用了一张灰色的占位图，但图片加载完成后页面还是会“抖”一下，布局好像被撑开了。明明设置了宽高，为啥还会这样？ 我试过给 img 加 width: 100%; height: auto...
- 1
回答
3浏览
占位图加载时怎么避免页面跳动？
我在做图片懒加载，用了一个灰色背景当占位图，但图片加载完后容器高度变了，页面会突然跳一下，体验很不好。试过给img加固定宽高，但响应式布局下又不合适。 现在用的CSS是这样： .image-place...
- 2
回答
23浏览
占位图加载时怎么避免页面跳动？
我在做图片懒加载，用了灰色背景当占位图，但图片加载完成瞬间还是会引起页面轻微跳动，体验很不好。是不是宽高没设对？ 我给img标签加了固定宽高，CSS也写了： .placeholder { backgr...
- 1
回答
24浏览
图片懒加载时占位图怎么保持宽高比不抖动？
我在做图片懒加载，用一个灰色div当占位图，但真实图片加载后页面会跳动，因为不知道原图尺寸。有没有办法提前固定容器比例？ 试过用padding-top百分比方案，但需要后端返回宽高，现在接口没给这些数...
- 2
回答
91浏览
图片懒加载时占位容器高度塌陷怎么办？
在做图片列表懒加载时，用了Intersection Observer，但图片未加载时占位容器高度会塌陷，导致页面布局跳动。试过给图片设置固定高度，但不同图片尺寸差异大，效果不好： <div cl...
- 2
回答
58浏览
图片懒加载时占位图怎么保持宽高比不塌陷？
我用 Intersection Observer 做了图片懒加载，但发现图片还没加载出来时，因为没有设置宽高，页面会先塌陷一下，然后图片加载完又撑开，体验很不好。我试过给 img 加 width 和 ...
