[置顶] Jquery之ShowLoading遮罩组件

发布时间：2020-07-09 14:29:33 作者：873582595
来源：网络阅读：460

一、遮罩用途及效果

ShowLoading这个jQuery插件设计用于当运行Ajax请求时，可以在屏幕某一特殊区域(id,class或者html标签)覆一张正在加载中的图片。

有时候我们页面调用后台程序时间比较长时，前台页面暴露在用户之下，如果用户点击可能会造成逻辑混乱。这时候，遮罩就起到了很好的效果，在触发后台程序时我们将前台页面遮住，不让操作，同时给予一个程序运行请等待的效果。

遮罩效果：

[置顶] Jquery之ShowLoading遮罩组件

二、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();                 }             });

[置顶] Jquery之ShowLoading遮罩组件

相关阅读