ajax加loading效果。。。。

做报表，部分报表先加载，查询慢的就会很突兀，让优化一下~~
纯js,css做的！

原始图（有个报表加载很慢）：

加工后效果图：

使用的最原生加载中图片，大伙可以根据爱好自行替换！

ajax代码：

var ajaxParams = {
        "startTime": $("#startTime").attr("value"),
        "endTime": $("#endTime").attr("value"),
        "dto.cab139": $("#cab139").val()
    };
    $.ajax({//2.获取当前页数据
        url: "自己的后台Url", data: ajaxParams,
        beforeSend: function (XMLHttpRequest) {
            showMask("table1_list", true);
        },
        success: function (data) {
            hideMask("table1_list");
            var json = (JSON.parse(data)).data2.rs;
            setValues_5(json);
        }, error: function () {
            //清空分页条
            $("#page").html("");
        }
    });

只要实在 beforeSend 方法前调用蒙层方法showMask（“传入需要加载中的div id”），执行完查询后在success方法中去掉hideMask（“传入需要加载中的div id”）

js方法：showMask 和hideMask 方法

/**
   * 让某一个面板出现半透明蒙层，提示：读取中
   * @method showMask
   * @param {String} id  面板的id，如果不传或null就是整个页面
   * @param {Boolean} showLoading  是否显示loading的图片和文字，默认为true，如果设置为false不显示图片和文字
   */
function showMask(id, showLoading) {
    var height = document.body.scrollHeight,
        width = document.body.scrollWidth,
        top = 0,
        left = 0;
    var obj;
    if (id && (obj = document.getElementById(id))) {
        var $obj = $(obj);
        height = $obj.height();
        width = $obj.width();
        top = $obj.offset().top;
        left = $obj.offset().left;

        if ($obj.hasClass('panel') && $('>div.panel-header', $obj).length > 0) {
            top += $('>div.panel-header', $obj).outerHeight(true);
            height -= $('>div.panel-header', $obj).outerHeight(true);
        } else if (obj.tagName.toLowerCase() == 'fieldset') {
            top += 22;
            height -= 5;
            width += 18;
        }
    }
    var loadding = "";
    var loadding_name = "loading..."
    if (!(showLoading === false)) {
        console.log("走这里")
        //i18n:读取中...
        //loadding = "
" + loadding_name + "
";
        loadding = "
" + loadding_name + "
";
    }

    $("
" + loadding + "
").appendTo($('body'));
}

function hideMask() {
    $("body >div.enableButtonLayout").remove();
}

css方法：

<style>
    .enableButtonLayout{position:absolute;filter:alpha(opacity=70);opacity:.6;background:#ccc;z-index:99999}.enableButtonLayout.loading{background:#eee url(data:image/gif;base64,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)no-repeat 50%}
</style>

ojbk~
收工，下班！