一、遮罩用途及效果

惠農(nóng)網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián)公司,惠農(nóng)網(wǎng)站設(shè)計(jì)制作，有大型網(wǎng)站制作公司豐富經(jīng)驗(yàn)。已為惠農(nóng)1000+提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\外貿(mào)營銷網(wǎng)站建設(shè)要多少錢，請(qǐng)找那個(gè)售后服務(wù)好的惠農(nóng)做網(wǎng)站的公司定做！

    ShowLoading這個(gè)jQuery插件設(shè)計(jì)用于當(dāng)運(yùn)行Ajax請(qǐng)求時(shí)，可以在屏幕某一特殊區(qū)域(id,class或者h(yuǎn)tml標(biāo)簽)覆一張正在加載中的圖片。

    有時(shí)候我們頁面調(diào)用后臺(tái)程序時(shí)間比較長時(shí)，前臺(tái)頁面暴露在用戶之下，如果用戶點(diǎn)擊可能會(huì)造成邏輯混亂。這時(shí)候，遮罩就起到了很好的效果，在觸發(fā)后臺(tái)程序時(shí)我們將前臺(tái)頁面遮住，不讓操作，同時(shí)給予一個(gè)程序運(yùn)行請(qǐng)等待的效果。

遮罩效果：

二、JQuery遮罩UI實(shí)現(xiàn)

引用文件：（下載地址）
showLoading.css
jquery.showLoading.js

三、使用方法

假設(shè)html頁面有有一個(gè)class為add_test_img的標(biāo)簽，需要通過ajax訪問后臺(tái)，并在add_test_img標(biāo)簽中顯示一些相關(guān)內(nèi)容，在內(nèi)容顯示之前，可對(duì)add_test_img標(biāo)簽使用遮罩，防止在數(shù)據(jù)顯示之前，被修改其中的內(nèi)容

//顯示遮罩 $(".add_test_img").showLoading();//ajax調(diào)用 $.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){           //對(duì)返回?cái)?shù)據(jù)進(jìn)行處理，并顯示                    //......                    //去除遮罩                     $(".add_test_img").hideLoading();                 },                 error:function(xhr) {           //顯示失敗信息                    //......                    //去除遮罩                     $(".add_test_img").hideLoading();                 }             });