一、遮罩用途及效果

    ShowLoading這個jQuery外掛設計用於當執行Ajax請求時，可以在螢幕某一特殊區域(id,class或者html標籤)覆一張正在載入中的圖片。

    有時候我們頁面呼叫後臺程式時間比較長時，前臺頁面暴露在使用者之下，如果使用者點選可能會造成邏輯混亂。這時候，遮罩就起到了很好的效果，在觸發後臺程式時我們將前臺頁面遮住，不讓操作，同時給予一個程式執行請等待的效果。

遮罩效果：

<link href="style/showLoading.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.showLoading.min.js"></script>

二、JQuery遮罩UI實現

引用檔案：（下載地址）
showLoading.css
jquery.showLoading.js

三、使用方法

假設html頁面有有一個class為add_test_img的標籤，需要通過ajax訪問後臺，並在add_test_img標籤中顯示一些相關內容，在內容顯示之前，可對add_test_img標籤使用遮罩，防止在資料顯示之前，被修改其中的內容。

//顯示遮罩
$(".add_test_img").showLoading();  
//ajax呼叫
$.ajax({
                type: "GET",
                url: "Api.php",
                data: {ApiTarget: 'TestImage', op: 'paginateByClassId', prj_id: prj_id, class_id:class_id, page: index, per_page: items_per_page, user_id: user_id, start_date:start_date_str, end_date:end_date_str},
                success: function(response){
                   //對返回資料進行處理，並顯示
                   //......
                   //去除遮罩
                    $(".add_test_img").hideLoading();
                },
                error: function(xhr) {
                   //顯示失敗資訊
                   //......
                   //去除遮罩
                    $(".add_test_img").hideLoading();
                }
            });