1. 程式人生 > >loading 遮罩層

loading 遮罩層

JS程式碼片段

//資料請求方法
var dom = $("#loading").length;
if(!dom){
    $("body").append("<div id='loading'></div>");
}
$("#loading").show();
//開始請求
...
...
...
//如果正常
$("#loading").hide();

對應的CSS設定

#loading {
    background: rgba(0,0,0,.5) url(../images/XXX.gif) no-repeat center center;
    width: 100%;
    height
: 100%
; position: fixed; left: 0; right: 0; bottom: 0; top: 0; z-index: 999999; display: none; filter: alpha(opacity=50); }

這種方式可以將Ajax請求重新封裝成自定義的方法,並將以上程式碼嵌入裡面則一勞永逸。