比较常见的做法，但对我而言是第一次做，记录一下。

为了把找来的loading.gif 的背景色设置为透明，还特意装了quicktime。

有学到一些额外的东西。

先将div及img定义好

<body>

     <div id="loadingDiv">

	<img src="loading.gif" style="margin-top:230px;margin-left:700px;" />

     </div>

</body>

注意：在img内可以用margin-top 和 margin-left 将loading的图片调整到列表正中央。

css样式(重点)

  	#loadingDiv {

	    background-color:grey;

	    filter: alpha(opacity=50); <!--IE的透明度-->

	    opacity: 0.1;<!--透明度，数值越大越透明，不要调太小，不然gif图片会特别模糊-->

	    display: none;

	    position: absolute;

	    top: 0px;

	    left: 0px;

	    width: 100%;

	    height: 100%;

	    z-index: 100; <!--此处的图层要大于页面-->

	    display:none;

    }

注意：此处用的id样式，页面初始化即启用，且已在样式内将该div设置为不显示。

之后将在js内动态调整它的隐藏与显示属性。当它显示时，将会遮盖住整个body，

用户无法对页面进行任何操作。

javascript代码：

function loadData(){

		//弹出遮盖层

		$("#loadingDiv").fadeTo(200,0.5);

	    $.ajax({

            url: 'xx/xx!query.action',

            dataType:"json",

            type: 'POST',

            success: function(data) { 	

			     //此处是加载列表数据的代码

				 //数据加载完毕，则关闭遮盖层

				 $("#loadingDiv").fadeOut(200);

            }

        });

	}

注意：这里用了fadeTo和fadeOut来显示和隐藏div，当然也可以用 show 和 hide。

JQuery 数据加载中禁止操作页面的更多相关文章

  1. JQuery插件：遮罩+数据加载中。。。（特点：遮你想遮，罩你想罩）

    在很多项目中都会涉及到数据加载.数据加载有时可能会是2-3秒,为了给一个友好的提示,一般都会给一个[数据加载中...]的提示.今天就做了一个这样的提示框. 先去jQuery官网看看怎么写jQuery插 ...

  2. jQuery实现加载中效果,防止重复提交

    //导出表格加载中的提示var dian=0;//控制'●'的个数var t=null;//停止时使用function id_loadspot(loadspotSpan,loadingDiv,expo ...

  3. dwz ie10一直提示数据加载中

    dwz js资源jquery.validate.js 搜索 this.attr('novalidate', 'novalidate'); 在33行左右 用if (typeof (Worker) !== ...

  4. layui数据加载中遮罩层的实现

    1.load方法提供三种风格供选择. 方法一:loadIndex = layer.load(); //不传参,默认0 方法二:loadIndex = layer.load(1); // 1,另外一种风 ...

  5. APP中数据加载的6种方式-b

    我们看到的APP,往往有着华丽的启动界面,然后就是漫长的数据加载等待,甚至在无网络的时候,整个处于不可用状态.那么我们怎么处理好界面交互中的加载设计,保证体验无缝衔接,保证用户没有漫长的等待感,而可以 ...

  6. javascript 实现页面加载完的操作

    document.onreadystatechange = function () { if (document.readyState == "complete") {//页面加载 ...

  7. App6种常见的数据加载设计

    App6种常见的数据加载设计 设计师在进行APP设计的设计时,往往会更加专注于界面长什么样,界面和界面之间怎么跳转,给予用户什么样的操作反馈,却偏偏特别容易忽略掉一个比较重要的环节,就是APP数据加载 ...

  8. jQuery-介绍 加载 选择器 样式操作 属性操作 绑定click事件

    jQuery - 介绍 加载 选择器 样式操作 属性操作 绑定click事件 注意:以下部分问题不能实现效果,因该是单词拼写错误(少个t)或者没有加引号(“swing”)... jquery介绍 jQ ...

  9. EasyUI datagrid 数据加载

    网上找了好多人的方法发现都有问题发一个可用方便的 主要分三种情况 加载1,loaddata 加载2,datagrid 加载3, url 加载 第一部分,datagrid加载 第二部分,点击 datag ...

随机推荐

  1. js 字符串，数组扩展

    console.log(Array.prototype.sort)//ƒ substring() { [native code] } console.log(String.prototype.subs ...

  2. 27.8 执行定时计算限制操作（Timer）

    private static System.Threading.Timer s_Timer; static void Main() { Console.WriteLine("checking ...

  3. 8.2.3 操作MySQL数据库

    Python访问MySQL数据库可以使用MySQLDb模块,该模块主要方法如下: (1)commit():提交事务. (2)rollback():回滚事务. (3)callproc(self,proc ...

  4. 【1657: [蓝桥杯][算法训练VIP]】统计单词个数

    [链接] 我是链接,点我呀:) [题意] 题意 [题解] 设dp[i][j]表示前i个字符分成j个部分的最多匹配单词个数. 则dp[i][j] = dp[prei][j-1] + get_num(pr ...

  5. Android第三方开源图片裁剪截取：cropper

     Android第三方开源图片裁剪截取:cropper 很多app都需要裁剪截取图片作为头像.logo之类,而cropper是github上的一个针对Android平台的.第三方开源图片裁剪截取项 ...

  6. [转]C#综合揭秘——深入分析委托与事件

    引言 本篇文章将为你介绍一下 Delegate 的使用方式,逐渐揭开 C# 当中事件(Event)的由来,它能使处理委托类型的过程变得更加简单.还将为您解释委托的协变与逆变,以及如何使用 Delega ...

  7. HDU 5501

    这题的01背包的特点很容易看出来,但其实发现,这个题讲究加入时候的顺序. 于是,用贪心排序,如代码中所示,如果A在B前面造成的分数损失更小,则排在前面...其实这个我也是猜的.. #include & ...

  8. ZOJ Monthly, November 2012

    A.ZOJ 3666 Alice and Bob 组合博弈,SG函数应用 #include<vector> #include<cstdio> #include<cstri ...

  9. 我的Android进阶之旅------&gt;Android中ListView中嵌套(ListView)控件时item的点击事件不起作的问题解决方法

    watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvb3V5YW5nX3Blbmc=/font/5a6L5L2T/fontsize/400/fill/I0JBQk ...

  10. Openwrt中luci配置页面cbi小记

    先看看network的配置文件: config interface 'loopback' option ifname 'lo' option proto 'static' option ipaddr  ...