本文是在其他博主的博客JS学习笔记 | 遮罩层Loading实现_jsp loading-CSDN博客基础上，进行实践的。
目录
一、需求
二、Jsp+css实现代码
一、需求
在springboot项目中的原始html5页面中，原本的功能是页面加载时，使用ajax向后端发送请求，后端返回的数据是一个map类型的数据。前端拿到数据之后，作为下拉框select标签的选项。
目前想要在这个基础上添加一个loading效果。使得在点击按钮后和ajax请求前显示loading效果，请求返回数据之后去掉loading效果。
二、Jsp+css实现代码
（1）首先，添加div标签，放在body下的第一个位置。
<div id="loading"><img src="images/loading.gif"><p>请稍候....</p>
</div>其中，图片路径如下，
（2）使用css样式，给#loading设置背景颜色，覆盖整个页面。把这个div标签展示在页面中间，实现页面效果：动图下面有一行文字“请稍后”。
下面是完整的 HTML 和 CSS 代码，实现覆盖整个页面的背景色，并将 loading 显示在页面中间：
<div id="loading"><img src="images/loading.gif"><p>请稍后</p>
</div><style>#loading {/* 固定定位，覆盖整个页面 */position: fixed;top: 0;left: 0;width: 100%;height: 100%;/* 背景色（可以调整颜色和透明度） */background-color: rgba(255, 255, 255, 0.8); /* 半透明白色背景 *//* 确保在最上层 */z-index: 9999;/* 使用flex布局使内容居中 */display: flex;flex-direction: column; /* 垂直排列 */justify-content: center; /* 垂直居中 */align-items: center; /* 水平居中 */}#loading img {/* 图片样式 */display: block;margin-bottom: 10px; /* 图片和文字之间的间距 */}#loading p {/* 文字样式 */margin: 0;color: #666;font-size: 14px;}
</style>
关键样式说明：
- position: fixed - 固定定位
- top: 0; left: 0; - 从页面左上角开始
- width: 100%; height: 100%; - 占满整个页面
- background-color - 背景色（可以根据需要调整）
- display: flex - 使用flex布局实现居中
- flex-direction: column - 内容垂直排列
- justify-content: center - 垂直居中
- align-items: center - 水平居中
你可以根据需要调整样式：
- 背景色
- 图片和文字的间距
- 文字的颜色和大小
- z-index的值（确保显示在最上层）
这样，动图和文字就会出现在页面上，且文字位于动图的下方。
（3）接下来，在前端HTML文件中编写JavaScript代码，通过ajax发送请求，
function search() {//点击查询按钮重新显示loading$('#loading').show();$.ajax({url : "/xxx/xxx",type : 'GET',success : function(data) {//成功后 隐藏loading框，$('#loading').hide();// 解析数据},error : function() {slert("error");}})
}（4）使用浏览器打开html文件，
页面效果如下，
