JavaScript 原生实现 AJAX 加载中提示框
在 Web 开发中，异步请求（AJAX）往往需要一定的加载时间。为了提升用户体验，通常会在页面上提供一个临时的 Loading 提示框。本文将展示如何使用原生 JavaScript 创建一个固定的加载遮罩层，支持开启和关闭两种状态。
功能目标
实现一个全局显示的 Loading 容器，内容可自定义（如显示“加载中...”），能够根据请求开始和结束的状态进行显示与隐藏，且不影响页面原有布局的滚动行为。
代码逻辑解析
核心函数 loading(p_value, str) 接收两个参数：p_value 控制开关（true 为显示，false 为隐藏），str 为提示文字。逻辑分为三种场景：
第1步：判断是否需要显示
当 p_value 为真时进入显示逻辑。首先检查页面是否已存在 ID 为 load_area 的元素。若不存在，则执行初始化；若存在且需更改文案，则更新节点。
第2步：动态创建 DOM 结构
使用 document.createElement 创建外层容器 <div> 和内层提示文本 <span>。设置容器的 ID 为 load_area，以便后续查找和操作。
第3步：计算位置与设置样式
为了让提示框出现在页面可视区域的中央偏上位置，代码计算了当前页面的滚动高度：
var top = document.body.scrollTop + document.documentElement.scrollTop;
var top_position = top + 157 + "px";
para.style.top = top_position;同时赋予容器绝对定位样式（position: absolute），使其脱离文档流并固定位置。样式中包含了半透明背景、圆角、阴影以及文字居中属性：
para.style.cssText += ";position:absolute;left:50%;width:140px;margin-left:-70px;height:50px;line-height:50px;font-size:18px;text-overflow:ellipsis;overflow:hidden; white-space:nowrap;text-align:center;background-color: #000;border-radius:2px;-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.5);color:#eee;";注：原文代码中有一行关于 icon 样式的引用可能引发错误，实际只需关注 para 的样式即可。
第4步：插入图标与文本
创建图像对象作为加载动画图标（此处为静态 GIF 占位），将其加入容器，随后加入文本节点，最后将父容器添加到 body 末尾。
完整代码示例
使用方法
在进行 AJAX 请求前调用，并在请求回调结束后关闭：
注意事项
- 路径替换：代码中的
icon.src使用了相对路径images/loading1.gif，实际使用时请替换为您项目中有效的图片资源路径。 - 样式冲突：该方案使用内联 CSS (
cssText)，若项目中有特定的 CSS 重置库或框架，可能需要调整定位或颜色属性以避免冲突。 - 现代替代方案：对于新项目，建议直接使用 CSS 动画结合
opacity过渡效果，或使用现有的 UI 组件库，以获得更平滑的交互体验。
以上就是 JavaScript 模拟实现 Ajax 加载框的详细内容，更多关于 JavaScript 前端交互的资料请关注本站其它相关文章！
本站声明
本文内容仅供参考，不代表本站观点。转载或引用请注明出处。如发现内容问题，请通过联系我们页面反馈。
