上传或提交等待过程图标loading.gif的实现

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title></title>

<style>

.loadingWrap{

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

z-index:300;

background-image:url(loading.gif);

background-repeat:no-repeat;

background-position:center center;

background-color:#000;

background-color:rgba(0,0,0,0.5);

filter:alpha(opacity=50);

}

</style>


</head>

<body>

测试 加载中。。。

<div class="loadingWrap"></div>

</body>

</html>
  1.  

 

ajax提交表单后的等待,应当做如下处理:

 

$.ajax(

type:"post",

url:basePath + “xxx/xxx/xx.do”,

data:{"idMerchant":idMerchant},

dataType:"json",

success:function(data){//后端返回json格式的字符串

if(!data){//成功不需要提示

alert("提交失败!");

}

},

error:function(){

alert("查询异常,请稍后再试或联系管理员。。。");

},

beforeSend: function(){

$("<div class="loadingWrap"></div>").appendTo("body");

},

complete: function(){

$(".loadingWrap").remove();

}


});
beforeSend和complete中处理!!!
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
loading图标gif是一种用于表示正在加载或处理过程中的动态图像。它通常用于网页、软件或应用程序中,以向用户传达正在进行中的操作。loading图标gif的设计可以有很多种样式,常见的有旋转的圆圈、进度条或者其他形状。 loading图标gif的作用是告知用户当前操作正在进行中,避免用户误会或怀疑页面或程序是否发生了错误。它可以增加用户对系统的耐心,避免用户过早地关闭或中断操作,尤其是在加载大量数据或进行复杂计算时。 loading图标gif的好处是它能够通过动态的变化吸引用户的注意力,传达一种积极的信息——程序正在工作,不要关闭或退出。同时,由于loading图标gif只是一个小的动画图像,它不会占用太多的资源或带宽,不会影响用户体验,而且它的加载速度通常也比较快。 loading图标gif的设计应该简洁明了,易于理解。它应该清楚地表示正在加载的过程,以便用户能够明确知道系统仍然在工作中。此外,为了避免用户的疑虑或不耐烦,最好在加载时间较长的操作中显示进度条或百分比进度,以便用户知道还需要多长时间才能完成。 总之,loading图标gif是一种用于表示正在加载或处理过程中的动态图像,它能够提醒用户当前操作正在进行中,增加用户的耐心和信心。它应该简洁明了,易于理解,并且最好显示加载进度,以便用户知道还需要多长时间完成操作。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

yusirxiaer

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值