最近项目需要用到ajax与后台传递数据,数据量大时会等候稍久,有了用户体验友好一点,刚好用到Easyui 弹出加载中的遮罩的两种方法。
第一种:
$.ajax({
type:'POST',url:url,
data:obj,
dataType:'json',
beforeSend: function () {
load();
},
complete: function () {
disLoad();
},
success:function(data){
showMessage(data);
}
});
}
//弹出加载层
function load() {
$("<div class=\"datagrid-mask\"></div>").css({ display: "block", width: "100%", height: $(window).height() }).appendTo("body");
$("<div class=\"datagrid-mask-msg\"></div>").html("邮件发送中,请稍候。。。").appendTo("body").css({ display: "block", left: ($(document.body).outerWidth(true) - 190) / 2, top: ($(window).height() - 45) / 2 });
}
//取消加载层
function disLoad() {
$(".datagrid-mask").remove();
$(".datagrid-mask-msg").remove();
}
第二种:
$.ajax({
type:'POST',
url:url,
data:obj,
dataType:'json',
beforeSend: function () {
$.messager.progress({
title: '提示',
msg: '文件上传中,请稍候……',
text: ''
});
},
complete: function () {
$.messager.progress('close');
},
success:function(data){
$("#uploadHtmlUrl").val(data.fileUrl);
$("#uploadHtml").attr("src", data.fileUrl);
}
});