溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
一、遮罩用途及效果
ShowLoading這個jQuery插件設計用于當運行Ajax請求時，可以在屏幕某一特殊區域(id,class或者html標簽)覆一張正在加載中的圖片。
有時候我們頁面調用后臺程序時間比較長時，前臺頁面暴露在用戶之下，如果用戶點擊可能會造成邏輯混亂。這時候，遮罩就起到了很好的效果，在觸發后臺程序時我們將前臺頁面遮住，不讓操作，同時給予一個程序運行請等待的效果。
遮罩效果：
![[置頂] Jquery之ShowLoading遮罩組件](http://pic002.cnblogs.com/images/2012/310680/2012121809574995.png)
二、JQuery遮罩UI實現
引用文件：（下載地址）
showLoading.css
jquery.showLoading.js
<link href="style/showLoading.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="js/jquery.showLoading.min.js"></script>
三、使用方法
假設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(); } });
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
