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

为了把找来的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. Array的内置方法思维导图整理（JavaScript）

    按照MDN整理的数组部分的思维导图,主要目的是方便查漏补缺,所以写的不是很详细.

  2. [luogu3155 CQOI2009] 叶子的染色（树形dp）

    传送门 Solution 十分简单的树形dpQwQ,转移关系:父亲染了儿子不用染 只需要确定根就是简单树形dp,而其实根可以随便取一个非叶子节点 可以分情况讨论发现答案并不会改变 Code //By ...

  3. 49.ardinality算法之优化内存开销以及HLL算法

    主要知识点 precision_threshold参数的理解 HLL算法优化(hash)         cardinality,count(distinct),5%的错误率,性能在100ms左右   ...

  4. axios的基本概念和安装以及配置方法

    ajax:异步请求,是一种无需再重新加载整个网页的情况下,能够更新部分网页的技术 axios:用于浏览器和node.js的基于promise的HTTP客户端 1.从浏览器制作XMLHttpReques ...

  5. 《零压力学Python》 之 第一章知识点归纳

    第一章(初识Python)知识点归纳 Python是从ABC语言衍生而来的 ABC语言是Guido参与设计的一种教学语言,为非专业编程人员所开发的. Python是荷兰程序员 Guido Van Ro ...

  6. CODEVS 3500

    题目描述 输入3个数a,b,c,求a^b mod c=?输入描述          三个数a,b,c输出描述         一个数,即a^b mod c 的答案.样例输入5 10 9样例输出 4 基 ...

  7. 7.2.1 代码测试 doctest

    Python标准库 doctest 可以搜索程序中类似于交互式Python代码的文本片段,并运行这些交互式代码来验证是否符合预期结果和功能,常用于Python程序的模块测试. 使用doctest模块测 ...

  8. .Net操作Excel —— NPOI

    近期的两个项目都有关于NPOI的功能,经过了一点学习,自己也摸索了一会,感觉还有点意思.现在将部分代码分享一下.一部分是C#代码,一部分是VB.Net的,懒得修改了,基本上都是从项目文件中copy出来 ...

  9. Flume基本概念

    1         Apache Flume 1.1         概述 Flume是Cloudera提供的一个高可用,高可靠的,分布式的海量日志采集.聚合和传输的软件. Flume的核心是把数据从 ...

  10. 洛谷—— P2424 约数和

    https://www.luogu.org/problem/show?pid=2424 题目背景 Smart最近沉迷于对约数的研究中. 题目描述 对于一个数X,函数f(X)表示X所有约数的和.例如:f ...