占位图加载时怎么避免页面跳动？
我在做图片懒加载，用了灰色背景当占位图，但图片加载完成瞬间还是会引起页面轻微跳动，体验很不好。是不是宽高没设对？
我给img标签加了固定宽高，CSS也写了：
.placeholder {
background-color: #f0f0f0;
width: 100%;
height: 200px;
object-fit: cover;
}
但还是不行，是不是还得用 aspect-ratio 或者别的方案？
- 1
回答
73浏览
Placeholder占位加载时怎么避免页面跳动？
我在用骨架屏做列表加载的placeholder，但数据回来后内容高度变了，页面会突然跳一下，特别难受。试过给容器写死高度，但不同设备显示行数不一样，根本没法固定。 现在用的是Tailwind写的骨架组...
- 1
回答
10浏览
图片懒加载时占位图怎么保持宽高比不抖动？
我在做图片懒加载，用一个灰色div当占位图，但真实图片加载后页面会跳动，因为不知道原图尺寸。有没有办法提前固定容器比例？ 试过用padding-top百分比方案，但需要后端返回宽高，现在接口没给这些数...
- 2
回答
16浏览
图片懒加载时占位图怎么处理才不抖动？
我在做图片懒加载，想用占位图避免布局抖动，但实际效果还是会有跳动，是不是我宽高没设对？ 试过给 img 加固定宽高，也试过用背景色占位，但图片加载完还是会“闪一下”或者把下面内容顶下去。是我哪里没考虑...
- 1
回答
18浏览
Placeholder占位加载时布局会跳动怎么办？
我在用Vue做列表加载，数据没回来前用灰色块当placeholder，但真实数据渲染后高度变了，页面会突然跳一下，体验很差。试过固定高度但内容长短不一不好设。 现在代码是这样： <div v-f...
- 1
回答
22浏览
图片懒加载时占位图怎么处理才不抖动？
我在做图片懒加载，用了一张灰色的占位图，但图片加载完成后页面还是会“抖”一下，布局好像被撑开了。明明设置了宽高，为啥还会这样？ 我试过给 img 加 width: 100%; height: auto...
- 1
回答
21浏览
智能预加载怎么判断用户下一步要访问哪个页面？
我最近在做首页性能优化，想用智能预加载提前加载用户可能点击的页面资源，但完全不知道该怎么预测用户行为。 试过用 IntersectionObserver 监听可视区域内的链接，但很多关键按钮并不在首屏...
- 2
回答
88浏览
图片懒加载时占位容器高度塌陷怎么办？
在做图片列表懒加载时，用了Intersection Observer，但图片未加载时占位容器高度会塌陷，导致页面布局跳动。试过给图片设置固定高度，但不同图片尺寸差异大，效果不好： <div cl...
- 1
回答
81浏览
WebView缓存不生效，页面总是重新加载怎么办？
我在做Hybrid App时，用WebView加载H5页面，明明设置了缓存策略，但每次打开都重新请求资源，根本没走缓存，特别慢。 我试过在Android里设置webView.getSettings()...
- 1
回答
21浏览
Icon太多导致页面加载慢，怎么优化才合理？
我们项目里用了很多小图标，现在首屏加载特别慢，Lighthouse提示“避免大量小请求”。我试过把几个常用 icon 合成雪碧图，但维护起来太麻烦，而且有些 icon 只在特定页面用。有没有更现代、更...
- 2
回答
33浏览
图片懒加载时占位图怎么保持宽高比不塌陷？
我用 Intersection Observer 做了图片懒加载，但发现图片还没加载出来时，因为没有设置宽高，页面会先塌陷一下，然后图片加载完又撑开，体验很不好。我试过给 img 加 width 和 ...
首先，确保每个图片容器都有固定的宽高比，可以使用
padding-top的技巧来实现。比如，如果你希望图片的宽高比是 16:9，可以这样设置：.placeholder-container {
position: relative;
width: 100%;
padding-top: 56.25%; / 16:9 的比例 /
}
.placeholder {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #f0f0f0;
object-fit: cover;
}
这样，无论图片何时加载，容器的高度都是根据宽度自动调整的，避免了页面跳动的问题。记得把 img 标签也放在
.placeholder-container内，并应用绝对定位覆盖占位图。希望这能解决你的问题，有时候这些小细节确实挺让人头疼的。