加载遮罩怎么才能盖住整个页面？
我做了一个全局加载遮罩，但发现它只盖住了视口，滚动后下面的内容还能操作，这不就失去遮罩意义了吗？
我试过用 fixed 定位加 100% 宽高，但页面内容很长时，遮罩层高度还是只有当前屏幕那么高。是不是应该用别的定位方式？或者要监听 body 高度？
.loading-mask {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 9999;
}- 1
回答
4浏览
全局加载遮罩怎么实现才不会影响页面滚动？
我在做后台管理系统，想加个全局加载状态，比如请求数据时整个页面蒙一层。但试了下直接用 fixed 定位的 div 遮罩，发现页面还能滚动，而且遮罩层有时候会被某些弹窗盖住，层级也不对。 我现在的写法大...
- 1
回答
31浏览
智能预加载怎么判断用户下一步要访问哪个页面？
我最近在做首页性能优化，想用智能预加载提前加载用户可能点击的页面资源，但完全不知道该怎么预测用户行为。 试过用 IntersectionObserver 监听可视区域内的链接，但很多关键按钮并不在首屏...
- 1
回答
9浏览
占位图加载时怎么避免页面跳动？
我在做图片懒加载，用了一个灰色背景当占位图，但图片加载完后容器高度变了，页面会突然跳一下，体验很不好。试过给img加固定宽高，但响应式布局下又不合适。 现在用的CSS是这样： .image-place...
- 2
回答
23浏览
占位图加载时怎么避免页面跳动？
我在做图片懒加载，用了灰色背景当占位图，但图片加载完成瞬间还是会引起页面轻微跳动，体验很不好。是不是宽高没设对？ 我给img标签加了固定宽高，CSS也写了： .placeholder { backgr...
- 1
回答
46浏览
Taro分包加载后页面空白是怎么回事？
我在Taro项目里配置了分包，主包和分包路径都写对了，但进入分包页面时整个屏幕是白的，控制台也没报错。 试过把分包页面移到主包就能正常显示，说明页面代码本身没问题。app.config.ts里的分包配...
- 1
回答
89浏览
WebView缓存不生效，页面总是重新加载怎么办？
我在做Hybrid App时，用WebView加载H5页面，明明设置了缓存策略，但每次打开都重新请求资源，根本没走缓存，特别慢。 我试过在Android里设置webView.getSettings()...
- 1
回答
34浏览
Element Plus 的 Loading 加载怎么在表格上局部生效？
我在用 Element Plus 的 el-table，想在数据加载时只给表格加 loading，但一加上整个页面都灰了，这是为啥？ 我试过这样写： <el-table v-loading="l...
- 1
回答
38浏览
Webpack缓存没生效，页面还是重新加载了？
我用 Webpack 搭了个 React 项目，明明配置了 cache 缓存，但每次改点代码，整个页面都重新加载，连组件状态都没保住，是不是哪里配错了？ 我试过在 webpack.config.js ...
- 2
回答
79浏览
Placeholder占位加载时怎么避免页面跳动？
我在用骨架屏做列表加载的placeholder，但数据回来后内容高度变了，页面会突然跳一下，特别难受。试过给容器写死高度，但不同设备显示行数不一样，根本没法固定。 现在用的是Tailwind写的骨架组...
- 2
回答
69浏览
H5页面首屏加载超过3秒怎么优化？
我在开发移动端H5页面时，首页首屏加载时间总卡在3.2秒左右，已经尝试过压缩CSS和JS文件，给图片加了loading="lazy"属性，但效果不明显。有没有其他优化方法能进一步缩短加载时间？ 目前结...
直接改下你的样式：
记得 vh 是视口高度单位，比百分比更靠谱。我以前试过用百分比，结果在某些移动端表现不太一致，换了 vh 就稳多了。还有个小细节，如果页面有滚动条，可能会影响遮罩宽度，可以加个 box-sizing: border-box 给 loading-mask，这样就不用操心边距问题了。
要真正盖住整个页面，得用 absolute 定位，并且让它的包含块是整个文档（也就是 或 ），最稳妥的做法是：
把遮罩层直接 append 到 里，然后这样写样式：
等等，100vw 和 100vh 在移动端有时候会有滚动条导致多出一点高度，保险起见还是用：
不过最简单粗暴又兼容性好的方案其实是——直接让 的 position 设为 relative，然后遮罩用 position: fixed 就行，但别忘了在遮罩出现时禁止页面滚动：
然后 JS 里加个 class：
document.body.classList.add('loading-active');
加载完记得删掉：
document.body.classList.remove('loading-active');
这样遮罩永远是全屏的，而且配合禁止滚动（比如加 overflow: hidden 到 body）就万无一失了。我之前就踩过这个坑，以为 fixed 不行，其实关键是要控制住 body 的定位上下文，而不是硬改遮罩定位。