使用ajax查询时创建遮罩层不显示的问题

遮罩层

创建遮罩层方法

function createShade() {
	if(!($("#shade").length > 0)){
		var html = '<div id="shade"></div><div id="shade-load"><img alt="加载..." src="图片地址" />正在加载...</div>';
		$("body").before(html);
	}
    $('#shade').show();
    $("#shade-load").show();
}

隐藏遮罩层方法

function hideShade(){
	if($('#shade').css("display") == "block"){
		$('#shade').hide();
		$("#shade-load").hide();
	}
}

使用ajax查询

function upload(){
    createShade();    //显示遮罩层
    $.ajax({
        url:"xxxx",
        async:true,        //异步
        success:function(res){
            hideShade();    //隐藏遮罩层
        }
    })
}

• 注意如果在使用ajax提交时async的值设置为false(同步提交)，那么创建的遮罩层就不会显示，必须要设置为异步(async: true)才可以
• $("#shade").length的作用是判断是否存在该对象，如果仅仅没有后面的length，那么无论有没有id=shade这个元素，获得的总是一个对象，加上length之后值大于0表示存在这个对象
• jQuery 文档操作 - before() 方法表示在被选元素前插入指定的内容，语法格式是$(selector).before(content)，其中content是必须的，规定要插入的内容（可包含 HTML 标签）