easyui 遮罩层 loading

最新推荐文章于 2022-09-29 14:06:55 发布

原创最新推荐文章于 2022-09-29 14:06:55 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

12 篇文章

订阅专栏

本文介绍了一种在Ajax请求过程中显示加载层的方法。通过在Ajax请求前调用load函数显示加载提示，在请求完成后调用disLoad函数移除加载层，实现了良好的用户体验。文章提供了具体的JavaScript代码实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

$.ajax({
			url:"/requestLog/logRe",
			data:{
				code:code
			},
			beforeSend: function () {
				load();
			},
			complete: function () {
				disLoad();
			},

ajax 上加上 beforeSend跟complete

//弹出加载层
function load() {  
    $("<div class=\"datagrid-mask\" id='bodymask' style='z-index:100001'></div>").css({display:"block",width:"100%",height:$("body").height()}).appendTo("body");  
    $("<div class=\"datagrid-mask-msg\" id='bodymask-msg'  style='z-index:100001;' ></div>").html("重发中，请稍候。。。").appendTo("body").css({display:"block",position: "fixed",left:($(document.body).outerWidth(true) - 190) / 2,top:($(window).height() - 45) / 2 });
}
//取消加载层  
function disLoad() {  
    $(".datagrid-mask").remove();  
    $(".datagrid-mask-msg").remove();  
}

就行了

 //弹出加载层
    load:function(target,text,reduceHeight) {
        if(!reduceHeight){
            reduceHeight=0;
        }
        $("<div class=\"datagrid-mask\"></div>").css({ display: "block", width: "100%", height: $(target).height()-reduceHeight }).appendTo($(target));
        $("<div class=\"datagrid-mask-msg\"></div>").html(text).appendTo($(target)).css({ display: "block", left: ($(target).outerWidth(true) - 190) / 2, top: ($(target).height() - 45) / 2,height:45});
    },
    //取消加载层
    disLoad:function() {
        $(".datagrid-mask").remove();
        $(".datagrid-mask-msg").remove();
    }