在HTML中点击提交、添加、修改等按钮时，添加等待loading遮罩层 ----JAVA

最新推荐文章于 2024-06-20 18:00:24 发布

huorongkai

最新推荐文章于 2024-06-20 18:00:24 发布

阅读量5k

点赞数 2

文章标签： java

本文链接：https://blog.csdn.net/huorngkai/article/details/106048325

版权

在项目中可能会有一些数据量较大的信息作提交，添加，修改等操作等待时间较长，
这样就会有需求就是提示一下，给用户更好的体验感

使用到的技术：thymeleaf
也可不使用thymeleaf，在文章中代码把相关的信息删除就可以

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">

这个地方先看html中的代码片段
有一个submit按钮做提交操作

下边是引入一个loading图片，显示在遮罩层中，图片可以从网上下载，可以是gif、pig的
还有一句提示的信息

<input id="hiddent" style="height: 30px" th:onclick="'postData()'" type="submit" value="提交"><br>
<span id="loading" class="loadingcss">
	<img src='../static/images/loading2.gif' th:src='@{/images/loading2.gif}' style='text-align:center;margin:0 auto;margin-top:25%;'>
	<p style='color:#ffffff;font-size:14px;'>不要进行别的操作,请稍后……</p>
</span>

其次就要设置遮罩层的样式，也就是上面代码片段中的span标签中的class标签

<style type="text/css">
	.loadingcss{
			height: 30%;
			width: 30%;
			position:absolute;
			left: 40%;
			top: 37%;
			background-color: rgba(0,0,0,0.4);/*显示遮罩层背景颜色和透明度*/
			/*如果上边的效果不理想可以分开实现背景颜色的透明度,背景颜色和透明度可自行调节*/
			/*
				background-color: #ccc;
				filter:alpha(Opacity=80);-moz-opacity: 0.5;opacity: 0.5;
			*/
		}
</style>

最后就是显示效果，点击提交出现遮罩层
首先需要在文档就绪函数中加上隐藏字段（使用的ID选择器就是上边代码片段中的span标签中的ID）

<script type="text/javascript">
		$(function(){
			$("#loading").hide();
		});
</script>

其次
可以解决点击提交按钮出现遮罩层
可以解决提交按钮多次重复提交问题，在这里使用到的是ajax提交
在ajax中添加

beforeSend:function(XMLHttpRequest){
		var winNode = $("#loading");
		//使遮罩层显示方法
		winNode.show();
		//解决按钮重复提交
		$("#hiddent").removeAttr("onclick");
},

提交完成之后可以选择跳转到新的页面，然后就不需要管遮罩层的显示问题
最后看一下实现的效果图：
在这里插入图片描述
总结：以上就是我的解决方案，记录一下，如果有不对的地方，请指正。

huorongkai

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
在HTML中点击提交、添加、修改等按钮时，添加等待loading遮罩层 ----JAVA

在项目中可能会有一些数据量较大的信息作提交，添加，修改等操作等待时间较长，这样就会有需求就是提示一下，给用户更好的体验感使用到的技术：thymeleaf也可不使用thymeleaf，在文章中代码把相关的信息删除就可以<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">这个地方先看html中的代码片段有一个submit按钮做提交操作下边是引入一个loading图片，显示在遮罩层
复制链接

扫一扫