如何为页面加载器添加全局遮罩灰屏效果

12次阅读

如何为页面加载器添加全局遮罩灰屏效果

本文介绍如何在 jquery ajax 请求期间，通过纯 css 方式为整个页面添加半透明灰色遮罩层，突出显示居中旋转的加载图标，无需修改 html 结构或引入额外 dom 元素。

本文介绍如何在 jquery ajax 请求期间，通过纯 css 方式为整个页面添加半透明灰色遮罩层，突出显示居中旋转的加载图标，无需修改 html 结构或引入额外 dom 元素。

实现“全页灰屏 + 加载图标”的核心目标，是让用户视觉焦点自然聚焦于加载状态，同时禁用（或弱化）背景交互感。许多开发者会本能地新增一个

配合 #loader 使用，但其实—— 仅靠一个 #loader 元素，配合巧妙的 CSS box-shadow 技巧，即可零 HTML 变更达成等效效果 。

✅ 推荐方案：利用超大 box-shadow 模拟全屏遮罩

关键思路是：将 #loader 的 box-shadow 扩展为覆盖整个视口的深色半透明层。由于 box-shadow 支持 inset 和 spread，我们使用 极大发散值（如 100vw）配合透明度控制 ，让阴影“撑满”屏幕，形成视觉上的灰屏。

以下是优化后的完整 CSS（已适配现代浏览器并增强可维护性）：

#loader {position: absolute;   left: 50%;   top: 50%;   z-index: 9999; /* 确保高于所有内容 */   width: 120px;   height: 120px;   margin: -60px 0 0 -60px; /* 更精确的居中：-height/2, -width/2 */   border: 16px solid #f3f3f3;   border-radius: 50%;   border-top-color: #3498db;   animation: spin 2s linear infinite;   /* ? 核心：全屏灰色遮罩（半透明白色底 + 深灰阴影）*/   background: rgba(255, 255, 255, 0.9);   box-shadow:      inset 0 0 0 100vw rgba(0, 0, 0, 0.4), /* 内阴影全覆盖，模拟遮罩 */     0 0 0 100vw rgba(0, 0, 0, 0.4);       /* 外阴影兜底（兼容性补充）*/ }  @keyframes spin {from { transform: rotate(0deg); }   to   {transform: rotate(360deg); } }

? 为什么用 inset？
inset 内阴影会从元素自身边界向内扩散，结合 100vw 的 spread 值，可稳定覆盖整个视口宽度（即使页面有横向滚动条也基本兼容）。相比外阴影，它更不易受父容器 overflow 影响，且渲染性能更优。

✅ jQuery 控制逻辑（保持简洁可靠）

你现有的 ajaxStart / ajaxStop 绑定完全可用，只需确保 #loader 初始为隐藏状态：

<!-- HTML 中仅需保留这一行 --> <div id="loader" style="display: none;"></div>

$(document).ajaxStart(function() {$("#loader").show();});  $(document).ajaxStop(function() {$("#loader").hide();   $('#cancelBtn').removeAttr('hidden'); });

⚠️ 注意事项与最佳实践

层级安全 ：z-index: 9999 是保守设定，若项目中存在更高 z-index（如弹窗、导航栏），请统一检查并调整，推荐使用 CSS 自定义属性管理层级变量。
移动端适配 ：100vw 在 iOS Safari 中可能因地址栏缩放产生微小偏差，可追加媒体查询微调：
```
@media (max-width: 768px) {#loader {     box-shadow: inset 0 0 0 101vw rgba(0,0,0,0.4);   } }
```
无障碍友好 ：灰屏期间建议临时禁用键盘 Tab 导航（document.body.setAttribute(‘aria-hidden’, ‘true’)）并在加载结束时恢复，提升残障用户操作体验。
性能提示 ：避免在 box-shadow 中使用过大的模糊值（如 50px），本例中 0 模糊值保证了 GPU 加速渲染，无卡顿风险。